首页手记同时运动 + 链式运动
同时运动 + 链式运动

标签：
Html/CSS JavaScript
注意 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>
点击查看更多内容