Heim >Web-Frontend >HTML-Tutorial >JS运动学习笔记 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）_html/css_WEB-ITnose
JS运动学习笔记 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:18:371128Durchsuche
<!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. 当出现相同冗余代码时，可以适当引入参数，简化代码。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS3实现嵌套立方体旋转的3D效果_html/css_WEB-ITnoseNächster Artikel：Cache-Control不起作用_html/css_WEB-ITnose