你的位置:首页 > 网页设计

[网页设计]JS运动学习笔记


<!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>Title</title>  <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. 当出现相同冗余代码时,可以适当引入参数,简化代码。