注意 flag、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链式变化动画</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div {
width:300px;
height:100px;
background:red;
margin-bottom: 10px;
border: 1px black solid;
filter:Alpha(opacity:333);
opacity: 0.333;
}
</style>
<script type="text/javascript">
window.onload=function(){
/*var aLi=document.getElementsByTagName('div');
for(var i=0;i<aLi.length;i++){
aLi[i].timer=null;
aLi[i].onmouseover=function(){
startMove(this,400);
}
aLi[i].onmouseout=function(){
startMove(this,200);
}
}*/
var odiv1=document.getElementById('div1');
var odiv2=document.getElementById('div2');
var odiv3=document.getElementById('div3');
var odiv4=document.getElementById('div4');
odiv1.onmouseover=function(){
startMove(this,'width',400);
};
odiv1.onmouseout=function(){
startMove(this,'width',300);
};
//同时运动
odiv2.onmouseover=function(){
//利用json将属性和值两项合在一起
startMove3(odiv2,{width:310,height:200},function () {
startMove3(odiv2,{opacity:80})
});
};
odiv2.onmouseout=function(){
startMove3(this,{width:300,height:100},function(){
startMove3(odiv2,{opacity:50})
})
};
//透明度变化动画
odiv3.onmouseover=function(){
startMove(this,'opacity',100);
}
odiv3.onmouseout=function(){
startMove(this,'opacity',55);
}
//链式动画
odiv4.onmouseover=function(){
startMove2(this,'width',400, function (){
startMove2(odiv4,'height',200,function(){
startMove2(odiv4,'opacity',80)
})//这里odiv4不能用this！！！
//alert(this);//输出object window
});
}
odiv4.onmouseout=function(){
startMove2(this,'width',300,function(){
startMove2(odiv4,'height',100,function(){
startMove2(odiv4,'opacity',30)
})
});
}
}
/*调用的函数有3个参数，this表示object即当前所选对象，json为所选属性要达到的目标值，fn表示链接动作。*/
function startMove3(obj,json,fn){
clearInterval(obj.timer);
var flag=true; //假设所有的值都到达目标值
obj.timer=setInterval(function(){
//第一步取当前值
for(var attrr in json) {
var icur = 0;
if (attrr == 'opacity') {
/*如果当前值为透明度（无单位，并且为小数），需要用parseFloat去小数，再用Math.round四舍五入取整来修正BUG*/
// icur=parseFloat(getStyle(obj,attrr))*100;//小数在计算机中表示存在误差
icur = Math.round(parseFloat(getStyle(obj, attrr)) * 100);
//alert(parseFloat(getStyle(obj,attrr))*100);
}
else {
icur = parseInt(getStyle(obj, attrr));
}
//第二步 求速度
var speed = (json[attrr] - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
/*if(icur>iTarget){
speed=-10;
}
else {
speed=10;
}*/
//第三步 运动过程
if( icur!==json[attrr]) {
//如果不是所有目前值达到目标值，标签不成立，继续进行运动
flag=false;
}
else{
flag=true;
}
if(attrr=='opacity'){
//透明度无单位px，所以单独列出并考虑兼容
obj.style.filter= 'alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+ speed)/100;
}
else{
obj.style [attrr] =icur+speed+'px';
}
}
if(flag){
clearInterval(obj.timer);
if (fn){
fn();
}
}
},
30);
}
function startMove(obj,attrr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var icur=0;
if(attrr=='opacity'){
// icur=parseFloat(getStyle(obj,attrr))*100;//小数在计算机中表示存在误差
icur=Math.round(parseFloat(getStyle(obj,attrr))*100);
//alert(parseFloat(getStyle(obj,attrr))*100);
}
else{
icur=parseInt(getStyle(obj,attrr));
}
var speed=(iTarget-icur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
/*if(icur>iTarget){
speed=-10;
}
else {
speed=10;
}*/
if(iTarget==icur){
clearInterval(obj.timer);
}else{
if(attrr=='opacity'){
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attrr] =icur+speed+'px';
}
}
},30);
}
function startMove2(obj,attrr,iTarget,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var icur=0;
if(attrr=='opacity'){
// icur=parseFloat(getStyle(obj,attrr))*100;//小数在计算机中表示存在误差
icur=Math.round(parseFloat(getStyle(obj,attrr))*100);
//alert(parseFloat(getStyle(obj,attrr))*100);
}
else{
icur=parseInt(getStyle(obj,attrr));
}
var speed=(iTarget-icur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
/*if(icur>iTarget){
speed=-10;
}
else {
speed=10;
}*/
if(iTarget==icur){
clearInterval(obj.timer);
if(fn){
fn();
}
}else{
if(attrr=='opacity'){
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attrr] =icur+speed+'px';
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//IE
}else{
return getComputedStyle(obj,false)[attr];//火狐
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
随时随地看视频
