代码改变世界

js运动框架封装以及两种案例

2018-10-22 09:59  小花儿鹿  阅读(288)  评论(0)  编辑  收藏  举报

1、sports.js代码

function sport(obj,json,fn){
    //1.先停止上一次的计时器
    clearInterval(obj.timer);
    //2.开启新的计时器
    obj.timer = setInterval(()=>{
        //1.设置开关
        let stop = true;
        //2.遍历json
        for(let attr in json){
            //1.获取当前值
            let cur = attr === 'opacity' ? parseInt(parseFloat(getStyle(obj,attr) )* 100) : parseInt(getStyle(obj,attr));
            //2.计算速度 
            let speed = (json[attr] - cur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //3.判断是否结束
            if(cur !== json[attr]){
                stop = false;
            }
            //4.设置运动 
            if(attr === 'opacity'){
                obj.style.opacity = (cur + speed) / 100;
                obj.style.filter = "alpha(opacity=" + (cur + speed) + ")";
            }else{
                obj.style[attr] = cur + speed + 'px';
            }
        }
        if(stop){
            clearInterval(obj.timer);
            if(typeof fn === 'function'){
                fn();
            }
        }
    },30)
}
//获取非行内样式(兼容)
function getStyle(obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}
 

2.1、多物体运动(非链式)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            body{
                height: 5000px;
            }
            div{
                width: 100px;
                height: 100px;
                background: red;
                border: 2px solid black;
                opacity: 1;
                filter: alpha(opacity=100);
            }
        </style>
    </head>
    <body>
        <div></div>
        
        
        <script src="sport.js"></script>
        <script type="text/javascript">
            const oDiv = document.querySelectorAll('div')[0];
            
            oDiv.onmouseenter = function(){
                sport(this,{width : 400,height:400,opacity:30});
                
            }
            oDiv.onmouseleave = function(){
                sport(this,{width : 100,height : 100,opacity : 100});
            }
        </script>
    </body>
</html>

2.2、多物体运动(链式)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
                opacity: 1;
                filter: alpha(opacity=100);
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
        <script src="sport.js"></script>
        <script type="text/javascript">
            let oDiv = document.getElementById("box");
　　　　　　  //箭头函数
            oDiv.onmouseenter = function(){
                sport(this,{width : 300},()=>{
                    sport(this,{height : 300},()=>{
                        sport(this,{opacity : 30})
                    })
                });
            }
　　　　　　　//bind
            oDiv.onmouseleave = function(){
                sport(this,{opacity : 100},function(){
                    sport(this,{height : 100},function(){
                        sport(this,{width : 100},"hehe")
                    }.bind(this))
                }.bind(this))
            }
        </script>
    </body>
</html>