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

             任意值的运动框架              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*/        }                  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);        }       
变高

      
查看更多关于JS运动学习笔记任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）_html/css_WEB的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112142