js 缓冲运动

js的缓冲运动, 常用于轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: skyblue;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var oBox = document.getElementById("box");
        startMove(oBox, {left:500}, function(){
            startMove(oBox, {top:500})
        });
　　　　
　　　　　　
　　　　　//可以获取非行内样式
        function getStyle(obj, attr){
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr];
        }
　　　　
        function startMove(obj, json, fn) {
　　　　　　　//清除定时器,避免多次调用造成定时器执行混乱
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                for(attr in json){
                    var icur = 0;
　　　　　　　　　　　　//attr如果是opacity, 考虑IE的兼容写法
                    icur = (attr == 'opacity') ? Math.round(getStyle(obj, attr) * 100) : parseInt(getStyle(obj, attr));
　　　　　　　　　　　　//iSpeed是一个增长变量,除数可看情况更改
                    var iSpeed = (json[attr] - icur)/50;
　　　　　　　　　　　　//不明白iSpeed为什么要 大于0向上取整,小于0向下取整, 可能是不让iSpeed等于0
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
　　　　　　　　　　　　//改变样式
                    if(attr == 'opacity'){
                        obj.style.filter = "alpha(opacity:"+(icur+iSpeed)+")";
                        obj.style.opacity = (icur+iSpeed)/100;
                    }else{
                        obj.style[attr] = icur + iSpeed + 'px';
                    }
　　　　　　　　　　　　//当样式对应的值等于目标数值,清除定时器,如果有定义fn这个回调函数,则执行
                    if(icur == json[attr]){
                        clearInterval(obj.timer);
                        fn && fn();
                    }
                }
            }, 10)
        }

    </script>
</body>
</html>
js的缓冲运动, 常用于轮播

猜你喜欢
