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工具文档当中,方便随时调用,引入代码方法如下:

使用script标签来进行引入。

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页