1 | <!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); opacity: 0.3; } </style> <script> window.onload = function () {
|
登入後複製
关于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时,点击按钮时文本框内数值的变化。
1 | <!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;
|
登入後複製
5. 关于定时器:在每次执行运动框架内的定时器之前,应当清除所有定时器,保证每次只有一个定时器在运作,否则多个定时器同时工作会出bug,运行速度越来越快。
6. 当出现相同冗余代码时,可以适当引入参数,简化代码。