链式运动框架

最新推荐文章于 2022-11-15 14:03:20 发布

Alex十年

最新推荐文章于 2022-11-15 14:03:20 发布

阅读量235

点赞数

分类专栏： JavaScript知识总结

本文链接：https://blog.csdn.net/ilikejj0/article/details/79635154

版权

JavaScript知识总结专栏收录该内容

22 篇文章 0 订阅

订阅专栏

在原有的简易运动框架中再增加一个参数，fn,因为在js中可以传任何参数。所以可以传一个函数进去，，但是需要进行判断，如果传进来的有fn，就执行fn（）,没有就不执行。
html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>链式运动框架</title>
        <script src="move1.js"></script>
        <style>
            #div1{width: 100px;height: 100px;background: red; filter:alpha(opacity:30);opacity: 0.3;}
        </style>
        <script>
            window.onload=function(){
                var oDiv = document.getElementById('div1');
                oDiv.onmouseover=function(){
                    startMove(oDiv,'width',300,function(){
                        startMove(oDiv,'height',300,function(){
                            startMove(oDiv,'opacity',100);
                        });
                   });
                };
                oDiv.onmouseout=function(){
                    startMove(oDiv,'opacity',30,function(){
                        startMove(oDiv,'height',100,function(){
                            startMove(oDiv,'width',100);
                        });
                   });
                };
            }


        </script>
    </head> 
    <body>
        <div id='div1'>         
        </div>
    </body>
</html>

function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name]; 
    }
} 

function startMove(obj,attr,target,fn){ 
    clearInterval(obj.time);
    obj.time=setInterval(function(){
        //此时，可以使用之前封装好的函数,但是一定要记得使用parseInt，
        //因为得到的值带有px，使用parseInt把他转化为整数
        //对于透明度要换一种方式
        var curr=0;
        if(attr=='opacity'){
            //计算机存储小数时出现的bug，0.07*100得到的是7.000000001，所以四舍五入
            curr = Math.round(parseFloat(getStyle(obj,attr))*100);
        }else{
            curr = parseInt(getStyle(obj,attr));
        }

        var speed = (target-curr)/6;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        //此时不需要使用>号，是因为对于缓冲运动而言，速度是变化的，到最后的时候，速度回变成1
        //因此不会存在高度大于目标值的情况
        if(curr==target){
            clearInterval(obj.time);
            //如果存在，调用该函数
            if(fn)fn();
        }else{
            //此时可以利用[]获取属性的方法把属性作为参数传进来，
            //即把obj.style.height 转换为obj.style['height']

            if(attr=='opacity'){
                //记得加括号
                obj.style.filter = 'alpha(opacity:'+(curr+speed)+')';
                obj.style.opacity = (curr+speed)/100;
            }else{
                obj.style[attr] = curr+speed+'px';
            }                       
        }
    },30)
}