js完美运动框架

 

完美运动框架js文件及说明

/*调用说明
    node为节点
    json为要变化的的属性组成的对象
        例{width:300,height:200,opacity:30} 意思为要
        让node节点对象 宽变化到300px，高变化到200px，不透明度变化到30。
    complete 为当json对象的各项属性都变化到位时,需要执行什么。这里
            传入函数。一般为匿名函数。也可以在匿名函数里在调用startMove()函数；
            【注】这个参数为可选的,如果不写就代表结束，什么都不执行。

            示例1  function(){alert(1)}  //这样json对象的各项属性
                    都变化到位时，在浏览器警告框中输出1。
            示例2  function(){startMove(node, json, complete)}  //这样
                    写的意思是当上一个运动结束时在进行这一次运动。

            综合示例：
                aDivs[i].onmouseover = function(){
                    startMove(aDivs[0], {
                        width:200,    //宽度变为200px，不透明度变到30%
                        opacity: 30  
                    },function(){//上一个运动完成后，让高变为200px
                        startMove(aDivs[0], {
                            height:200    
                        },function(){//在上一运动完成后，让左边距增加到100px
                            startMove(aDivs[0],{
                                marginLeft:100
                            })
                        })
                    });//最后一个startMove()函数没有complete形参，
                        //所以结束
*/

//用的时候直接把代码拷走，调用即可，然后根据需要传参。

/*------------------完美运动框架------------------*/

function startMove(node, json, complete){ //complete = show
    clearInterval(node.timer);
    node.timer = setInterval(function(){

        var isEnd = true; //假设都到达目的值了。

        for(var attr in json){
            //1、获取当前的值
            var iCur = null;
            if(attr == "opacity"){
                iCur = parseInt(parseFloat(getStyle(node, attr)) * 100);
            }else{
                iCur = parseInt(getStyle(node, attr))
            }
            //2、计算速度
            var speed = (json[attr] - iCur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            //3、运动和停止分开
            
            if(attr == "opacity"){
                iCur += speed;
                node.style.opacity = iCur / 100;
                node.style.filter = "alpha(opacity=" + iCur + ")";
            }else{
                node.style[attr] = iCur + speed + "px";
            }

            //如果这个if语句成立，说明至少有一个样式没到达目的值
            if(json[attr] != iCur){
                isEnd = false;
            }
            
        }
        if(isEnd){
            clearInterval(node.timer);
            if(complete){
                complete();
            }
        }
    }, 30);
}

//获取当前有效样式的兼容写法
function getStyle(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj)[attr];
    }
}

/*------------------完美运动框架-end-----------------*/

 

调用示例：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用运动动框架</title>
    <style>
        div {width: 100px;height:100px;background:black;}
    </style>
    <script src="tool-YDKJ.js">//引入上面封装的完美运动框架</script>
    <script>
        window.onload = function(){
            var aDivs = document.getElementsByTagName('div');
            for(var i = 0; i < aDivs.length; i++){
                //鼠标移入
                aDivs[i].onmouseover = function(){
                    startMove(aDivs[0], {
                        width:200, //宽变到200px，不透明度变到30%
                        opacity: 30
                    },function(){
                        startMove(aDivs[0], {//上一运动结束后，高变为200px
                            height:200
                        },function(){
                            startMove(aDivs[0],{//再上一个运动后左边距增加到100
                                marginLeft:100
                            })
                        })
                    });
                }
                //鼠标移除
                aDivs[i].onmouseout = function(){
                    startMove(aDivs[0], {//宽变恢复到100px，不透明度恢复到100%
                        width:100,
                        opacity: 100
                    },function(){
                        startMove(aDivs[0], {//上一运动结束后，高恢复到100px
                            height:100
                        },function(){
                            startMove(aDivs[0],{//再上一个运动后左边距恢复到0
                                marginLeft:0
                            })
                        })
                    });
                }                    
            }

        }


    </script>
</head>
<body>
    <div></div>
</body>
</html>

 

浏览器效果：

 

posted @ 2018-09-11 21:07  暗恋桃埖源  阅读(210)  评论(0)    收藏  举报