JavaScript封装的运动函数

50 阅读 0 评论 33 点赞

我是靠谱客的博主专一马里奥，最近开发中收集的这篇文章主要介绍JavaScript封装的运动函数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box1 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            /**
        开启绝对定位
        */
            position: absolute;
            left: 0px;
        }

        #box2 {
            width: 0px;
            height: 1500px;
            border-left: 1px black solid;
            position: absolute;
            left: 800px;
            top: 0px;
        }
    </style>
    <script>
        window.onload = function () {  
            //获取需要移动的滑块
            var HuaKuai = document.getElementById("box1");
            //获取点击的按钮
            var YouYi = document.getElementById("but");
            var ZuoYi = document.getElementById("butx");
            //绑定点击事件
            YouYi.onclick = function () {
                move(HuaKuai,"width",800,10);
            }

            ZuoYi.onclick = function () {
                move(HuaKuai, "width",0, 10);
            }
        }
        //移动函数move——可以执行简单的动画，如轮播图
        /*
        参数：
        obj：要执行动画的对象
        attr：要执行的动画的样式
        target：执行动画的目标位置
        speed：移动的速度(正数向右移动，负数向左移动，最新写法调用者不用考虑正负)
        callback：回调函数，这个函数将会在动画执行完毕以后执行
        */
        //var time;
        function move(obj, attr,target, speed,callback) 
        {
            clearInterval(obj.time);
            var current=parseInt(getStyle(obj, attr));
            if(current>target){
                speed=-speed;
            }
            //向执行动画的对象中添加一个time属性，以免多个动画在执行的时候会互相干扰
            obj.time = setInterval(function () 
            {
                var oldValue = parseInt(getStyle(obj, attr));
                //alert(oldValue);
                var newValue = oldValue + speed;
                //向左移动时，需要判断newValue是否小于taget
                //向右移动时，需要判断newValue是否大于taget
                if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target))
                    newValue = target;
                obj.style[attr] = newValue + "px";
                if (newValue == target) 
                {
                    clearInterval(obj.time);
                    //动画执行完毕，调用回调函数，这里的断路操作是为了如果没有回调函数的时候就可以不报错了
                    callback&&callback();
                }
            }, 30)
        }


        //返回指定对象的样式
        function getStyle(obj, name) {
            if (window.getComputedStyle) {
                return getComputedStyle(obj, null)[name];
            } else {
                return obj.currentStyle[name];
            }
        }
    </script>
</head>

<body>
    <button id="but">点击按钮向右移动</button>
    <button id="butx">点击按钮向左移动</button>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

</html>

上面的代码是使用了两个高度封装的函数move()——移动函数，以及getStyle()——获取类的样式，来修改定时器移动方块操作的代码。

move()函数——可以执行简单的动画，比如轮播图

参数：

obj：要执行动画的对象

attr：要执行的动画的样式

这个参数可以指定动画改变的样式，比如传入“left”，就会出现滑块移动的动画。

传入“width”就会出现类似进度条的动画。

target：执行动画的目标位置

speed：移动的速度(正数向右移动，负数向左移动，最新写法调用者不用考虑正负)

callback：回调函数，这个函数将会在动画执行完毕以后执行

由于有些动画不需要回调函数，那么使用callback&&callback();这样的短路操作，就可以使得调用者不用必须传入回调函数。

move(HuaKuai,"width",800,10,function(){
      move(HuaKuai,"height",400,10);
      });

如图，传入一个回调函数之后，在进度条向右移动到终点之后，又向下移动。

move函数

        function move(obj, attr,target, speed,callback) 
        {
            clearInterval(obj.time);
            var current=parseInt(getStyle(obj, attr));
            if(current>target){
                speed=-speed;
            }
            //向执行动画的对象中添加一个time属性，以免多个动画在执行的时候会互相干扰
            obj.time = setInterval(function () 
            {
                var oldValue = parseInt(getStyle(obj, attr));
                var newValue = oldValue + speed;
                //向左移动时，需要判断newValue是否小于taget
                //向右移动时，需要判断newValue是否大于taget
                if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target))
                    newValue = target;
                obj.style[attr] = newValue + "px";
                if (newValue == target) 
                {
                    clearInterval(obj.time);
                    //动画执行完毕，调用回调函数，这里的断路操作是为了如果没有回调函数的时候就可以不报错了
                    callback&&callback();
                }
            }, 30)
        }

在move函数设计的过程中，发现如果把定时器放在外部变量中，有可能会导致多个动画在执行过程中产生影响，比如公用一个定时器的动画，第二个动画执行时会终止第一个动画的定时器，所以为了防止这种不好情况的发生，我们给执行动画的目标对象添加一个time属性来存放定时器，这样不同动画执行对象就拥有不同的定时器，从而不会产生影响。

getStyle函数

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

对于上面这两种高度封装的函数我们可以把他们放置在一个js工具文档当中，方便随时调用，引入代码方法如下：