JS动画（五）

上节课 我们讲解了如何获取到非行内样式，并完成了一个简单的div宽度变化，现在我们继续完善，实现如下效果：

animation.png
实现过程：

a. 设置其鼠标的移动事件：

window.onload = function () {
            //获取到div元素
            var div1 = document.getElementById("div1");
            //设置鼠标事件
            div1.onmouseover = function () {
                startMove(this, 400);
            };
            div1.onmouseout = function () {
                startMove(this, 200);
            }
        };

b. 获取到元素样式函数：

function getStyle(obj, attr) {
            //判断是否支持currentStyle属性，若为IE则支持
            if (obj.currentStyle){
                //返回该样式
                return obj.currentStyle[attr];
            }
            //若不支持，则使用getComputedStyle方法，使得火狐和谷歌支持
            else {
                return getComputedStyle(obj, null)[attr];
            }
        }

实现运动事件：

 function startMove(obj,iTarget) {
            //取消其他time事件，防止鼠标多次的移入移出产生异常的效果
            clearInterval(obj.timer);
            //设置time事件，每30ms执行一次
            obj.timer = setInterval(function (){
                //获取到当前元素的宽度，并转换为int类型
                var iCurrent = parseInt(getStyle(obj, 'width'));
                //计算其速度
                var speed = (iTarget - iCurrent) / 8;
                //对速度进行取整，因为上面的除法可能会产生小数点
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                //与目标值进行比较，达到目标值，则取消时间函数
                if(iCurrent == iTarget){
                    clearInterval(obj.timer);
                }
                //未到达目标值，则进行改变样式
                else {
                    obj.style['width'] = iCurrent + speed + 'px';
                }
            },30);
        }

关于ceil()函数 和 floor()函数：
Math.ceil(x) : 返回大于等于x，并且与它最接近的整数。
Math.floor(x)：小于等于x，并且与x最接近的整数。

实现动画：一个改变div的宽度，一个改变div的高度，效果如下：

animation.png

实际上，我们改变宽度的div动画已经实现了，而对于改变div的高度也就是将要改变的样式修改为高度即可：增加了startMove1函数

 window.onload = function () {
            //获取到div元素
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");

            //设置鼠标事件
            div1.onmouseover = function () {
                startMove(this, 400);
            };
            div1.onmouseout = function () {
                startMove(this, 200);
            };

            div2.onmouseover = function () {
                startMove1(this,400);
            };
            div2.onmouseout = function () {
                startMove1(this, 200);
            }
        };

 function startMove1(obj,iTarget) {
            //取消其他time事件，防止鼠标多次的移入移出产生异常的效果
            clearInterval(obj.timer);
            //设置time事件，每30ms执行一次
            obj.timer = setInterval(function (){
                //获取到当前元素的宽度，并转换为int类型
                var iCurrent = parseInt(getStyle(obj, 'height'));
                //计算其速度
                var speed = (iTarget - iCurrent) / 8;
                //对速度进行取整，因为上面的除法可能会产生小数点
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                //与目标值进行比较，达到目标值，则取消时间函数
                if(iCurrent == iTarget){
                    clearInterval(obj.timer);
                }
                //未到达目标值，则进行改变样式
                else {
                    obj.style['height'] = iCurrent + speed + 'px';
                }
            },30);
        }

我们对比一下startMove函数和startMove1函数，实际上就是改变的样式不同，一个改变宽度，一个改变高度。因此，我们可以修改，将两个函数合并起来。

        window.onload = function () {
            //获取到div元素
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");

            //传入宽度样式
            div1.onmouseover = function () {
                startMove(this, 400,'width');
            };
            div1.onmouseout = function () {
                startMove(this, 200,'width');
            };
            //传入高度样式
            div2.onmouseover = function () {
                startMove(this,400,'height');
            };
            div2.onmouseout = function () {
                startMove(this, 200,'height');
            }
        };
        //增加了attr参数，表示要改变的样式
        function startMove(obj,iTarget,attr) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function (){
                //传入样式参数
                var iCurrent = parseInt(getStyle(obj, attr));
                var speed = (iTarget - iCurrent) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if(iCurrent == iTarget){
                    clearInterval(obj.timer);
                }
                else {
                    //对传入的样式进行改变
                    obj.style[attr] = iCurrent + speed + 'px';
                }
            },30);
        }

实际上，修改的部分即含有注释部分。

完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get　Style</title>
    <style>
        ul{
            list-style: none;
        }
        #div1{
            width: 200px;
            height: 200px;
            background: #ff0;
            border: 2px solid #000;
        }
        #div2{
            width: 200px;
            height: 200px;
            background: #ff0;
            border: 2px solid #000;
        }
    </style>
    <script>
        window.onload = function () {
            //获取到div元素
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");

            //设置鼠标事件
            div1.onmouseover = function () {
                startMove(this, 400,'width');
            };
            div1.onmouseout = function () {
                startMove(this, 200,'width');
            };

            div2.onmouseover = function () {
                startMove1(this,400,'height');
            };
            div2.onmouseout = function () {
                startMove1(this, 200,'height');
            }
        };
        //增加了attr参数，表示要改变的样式
        function startMove(obj,iTarget,attr) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function (){
                //传入样式参数
                var iCurrent = parseInt(getStyle(obj, attr));
                var speed = (iTarget - iCurrent) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if(iCurrent == iTarget){
                    clearInterval(obj.timer);
                }
                else {
                    //对传入的样式进行改变
                    obj.style[attr] = iCurrent + speed + 'px';
                }
            },30);
        }

        /**
         * 封装一个函数用来获取样式
         * @param obj 传入的元素对象
         * @param attr 传入要获取的样式
         * @returns {*}
         */
        function getStyle(obj, attr) {
            //判断是否支持currentStyle属性，若为IE则支持
            if (obj.currentStyle){
                //返回该样式
                return obj.currentStyle[attr];
            }
            //若不支持，则使用getComputedStyle方法，使得火狐和谷歌支持
            else {
                return getComputedStyle(obj, null)[attr];
            }
        }
    </script>

</head>
<body>
<ul>
    <li>
        <div id="div1"></div>
    </li>

    <li>
        <div id="div2"></div>
    </li>
</ul>
</body>
</html>
总结：

这一节主要学习了修改不同样式的动画，并做了一定的封装。注意：对于重复的代码，我们一定要将其合并，使代码显得更加整洁。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,684评论 1赞 92
  • JavaScript
    一、JS前言 （1）认识JS 也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HT...
    凛0_0阅读 7,741评论 0赞 8
  • JavaScript进阶
    第1章 认识JS JavaScript能做什么？1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 5,198评论 0赞 5
  • 2017-06-03
    痛侧心扉，却连尖叫都不敢，原来真正的痛苦是如此的寂静……你没法发泄，更无从摆脱！
    小雪要吃豆沙包阅读 1,345评论 0赞 0
  • 画室说：爱，在这里，不走
    01 科和我们慧慧的长跑 一个晚上足以赚取我们这些90后空巢老人的泪点 sexy and warmhearted ...
    先生说阅读 3,003评论 0赞 1