首页 > 代码库 > Javascript之链式运动框架1

Javascript之链式运动框架1

2024-08-18 14:48:07   226人阅读

第一部分：HTML内容：

<script src="http://www.mamicode.com/6-1.js"></script>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById(‘div‘);
            var timer=null;
            oDiv.onclick=function(){
                move(oDiv,600,3000,‘width‘,function(){
                    move(oDiv,600,3000,‘left‘);
                });
            };
        }
    </script>
</head>
<body>
<div id="div"></div>
</body>

第二部分：6-1.js内容：
function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name]
    }
}
function move(obj,iTarget,time,name,fn){
    var timer=null;
    clearInterval(obj.timer);
    var start=parseFloat(getStyle(obj,name));//getstyle传的是带单位的，所以要加parsefloat，并且便于对opacity进行转换。
    var dis=iTarget-start;
    var count=Math.floor(time/30);
    var step=dis/count;
    var n=0;
    obj.timer=setInterval(function(){
        n++;
        var cur = start + n * dis / count;
        if(name==‘opacity‘){
            obj.style.opacity=cur;
            obj.style.filter = ‘alpha(opacity:‘ + cur * 100 + ‘)‘;
        }else{
            obj.style[name]=cur+‘px‘;
        }
        if(n==count){
            clearInterval(obj.timer);
            fn && fn();
        }
    },30)
}



因为封装好了框架，所以，在进行类似的代码的编写的时候，可以直接调用move函数。

Javascript之链式运动框架1


联系
我们