你的位置:首页 > 软件开发 > 网页设计 > JS运动学习笔记

JS运动学习笔记

发布时间:2016-05-09 12:00:23
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>任意值的运动框架</title&g ...
<!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运动学习笔记

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。