JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等） - Web学海无涯

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>任意值的运动框架title>
    style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            margin: 20px;
            background-color: yellow;
            border: 1px solid black;
            font-size: 14px;
            filter: alpha(opacity=30); /*IE*/
            opacity: 0.3; /*火狐,chrome*/
        }

    style>
    script>

        window.onload = function () {
//Div变高
            var oDiv1 = document.getElementById('div1');

            oDiv1.onmouseover = function () {
                startMove(this, 'height', 400);
            };
            oDiv1.onmouseout = function () {
                startMove(this, 'height', 200);
            };
//Div变宽
            var oDiv2 = document.getElementById('div2');

            oDiv2.onmouseover = function () {
                startMove(this, 'width', 400);
            };
            oDiv2.onmouseout = function () {
                startMove(this, 'width', 200);
            };
//改变文字大小
            var oDiv3 = document.getElementById('div3');
            oDiv3.onmouseover = function () {
                startMove(this, 'fontSize', 30);
            };
            oDiv3.onmouseout = function () {
                startMove(this, 'fontSize', 14);
            };
//修改透明度            
            var oDiv4 = document.getElementById('div4');

            oDiv4.onmouseover = function () {
                startMove(this, 'opacity', 100);
            };
            oDiv4.onmouseout = function () {
                startMove(this, 'opacity', 30);
            };

        };
        
//属性值的获取函数
        function getStyle(obj, name) {
            if (obj.currentStyle) {
                return obj.currentStyle[name];
            }
            else {
                return getComputedStyle(obj, false)[name];
            }
        }

//运动框架
        var timer = null;
        function startMove(obj, attr, iTarget) {    //obj代表对象,attr代表目标属性,iTarget代表设定的属性目标值
            clearInterval(obj.timer);       //每次执行函数之前清除定时器,保证每次只有一个定时器在工作
            obj.timer = setInterval(function () {
                var cur = 0;
                if (attr == 'opacity') {        //透明度属性的获取
                    cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);   //Math.round针对IE7出现小数的问题
                }
                else {
                    cur = parseInt(getStyle(obj, attr));     //非透明度的属性值获取
                }
                var speed = (iTarget - cur) / 6;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   //向上取整（速度为正值）和向下取整（速度为负值）
                if (cur == iTarget) {
                    clearInterval(obj.timer);       //达到目标值时清除定时器
                }
                else {
                    if (attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')';    //IE浏览器
                        obj.style.opacity = (cur + speed) / 100;      //火狐,chrome
                    }
                    else {
                        obj.style[attr] = cur + speed + 'px';   //非透明度属性值
                    }
                }
            }, 30);
        }

    script>
head>
body>
div id="div1">变高div>
div id="div2">变宽div>
div id="div3">I Love JavaScript!div>
div id="div4">修改透明度div>

body>
html>

关于JS运动框架，需要注意的点如下：

1. 透明度和非透明度属性值的获取和赋值需要分开设置；一般属性的单位值为px，透明度没有单位；

2. 透明度有兼容性问题;IE浏览器: filter:alpha(opacity=30); 火狐和chrome: opacity = 0.3; 因为透明度的值为小数，所以获取时需要使用parseFloat方法而非parseInt，后者会将透明度的值取0，从而设置无效；

3. 在IE7下，parseFloat（）*100得出的值可能为非整数，需要使用Math.round进行四舍五入做兼容处理；

4. speed = iTarget - cur, 得出的值可能为正或为负的小数，如果为正需要向上取整，为负向下取整，如果不进行此操作，将永远无法达到目标值，计算机关于属性值最小计算单位为1px,当 var speed = (iTarget - cur) / 6 的值小于0.5时会被忽略，具体请参考如下例子，当speed=0.4和0.5时，点击按钮时文本框内数值的变化。

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        #div1{
            width:100px;
            height:50px;
            background-color: yellow;
        }
    style>
    script>
       window.onload = function () {
           var oDiv = document.getElementById('div1');
           var oBtn = document.getElementById('btn1');
           oBtn.onclick = function () {
               var speed = 0.5;
//               var speed = 0.4;
               oDiv.style.width = oDiv.offsetWidth + speed + 'px';
               document.getElementById('text1').value = oDiv.offsetWidth;
           };

       }
    script>
head>
body>
div id="div1">div>
input type="button" id="btn1" value="按钮">
input type="text" id="text1">
body>
html>

关于小数取整的例子

5. 关于定时器：在每次执行运动框架内的定时器之前，应当清除所有定时器，保证每次只有一个定时器在运作，否则多个定时器同时工作会出bug，运行速度越来越快。

6. 当出现相同冗余代码时，可以适当引入参数，简化代码。