首页 > 代码库 > 运动框架

运动框架

2024-10-05 18:21:39   222人阅读

运动框架

首先用死的数据来测试运动框架是否可以运行

由于死的数据不方便于修改所以要分装一个函数来便于修改数序，需要的时候就调用函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            width:100px;
            height:100px;
            background:red;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script>
    var box=document.getElementById(‘box‘);
    function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }else{
            return getComputedStyle(obj,false)[name];
        }
    }
    function move(obj,name,target,dur,fn){
        var content=parseInt(dur/30);
        var start=parseFloat(getStyle(obj,name));
        var zong = target - start;
        var sum=0;
        var timer=setInterval(function(){
            sum++;
            var cur = start+sum*zong/content;
            if(name==‘opacity‘){
                obj.style[name]=cur;
                obj.style.filter=‘alpha(‘+cur*100+‘)‘;
            }
            obj.style[name] = cur + ‘px‘;
            if(sum==content){
                clearInterval(timer);
                fn && fn();
            }
        },30)
    }
box.onclick=function(){
    move(box, ‘top‘, 300, 1000,function(){
        move(box,‘left‘,500,300,function(){
            move(box,‘top‘,0,1000,function(){
                move(box,‘width‘,400,100,function(){
                    move(box,‘opacity‘,0,400);
                });
            })
        });
    });
}
</script>
这样分装一个函数便于以后的调用和修改
这个函数
function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }else{
            return getComputedStyle(obj,false)[name];
        }
    }
是用来获取属性的也是通过传参来获取属性
而
fn && fn();
是判断是否有这个函数如果有函数就执行紧跟着的这个函数
box.onclick=function(){
    move(box, ‘top‘, 300, 1000,function(){
        move(box,‘left‘,500,300,function(){
            move(box,‘top‘,0,1000,function(){
                move(box,‘width‘,400,100,function(){
                    move(box,‘opacity‘,0,400);
                });
            })
        });
    });
}
一直执行，执行到没有函数停止，
分装好之后，需要用个时候只需要调用函数来传入参数即可可以省很多时间

 

运动框架


联系
我们