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);
        }

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

完整代码如下：

总结：

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