JS学习笔记 - 透明度运动框
该练习的笔记如下：
1. var cur=0; //先声明一个变量。
2. parseInt会舍掉小数，而opacity值恰恰是小数，所以对于opacity，必须用parseFloat。
cur=parseFloat(getStyle(obj, attr))*100;
3.
a. '+ var +' 字符串中引入变量的格式。
b. 透明度兼容性问题，需要2种分别赋值。
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
4. Math.round(); 四舍五入，舍去小数。 可解决parseFloat之后数值有很多小数位的问题。
5. 运动函数中，opacity的目标值是100，不是1。 （可直接记成和css里的相反。）
startMove(this, 'opacity', 100);
要根据后面的运用场景来看，这个值不是用来给式样赋值的。而是后面运动函数里使用的。
疑点：
这里字符串变量连接没有括号？ 需要搞清楚、熟记字符串连接规则的部分。
obj.style[attr]=cur+speed+'px';
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div {width:200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; filter:alpha(opacity:30); opacity:0.3;} </style> <script> window.onload=function () { var oDiv1=document.getElementById('div1'); oDiv1.onmouseover=function () { startMove(this, 'opacity', 100); }; oDiv1.onmouseout=function () { startMove(this, 'opacity', 30); }; }; function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } function startMove(obj, attr, iTarget) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var cur=0; //先声明一个变量 if(attr=='opacity') { //cur=parseFloat(getStyle(obj, attr))*100; //parseInt会舍掉小数，而opacity值恰恰是小数，所以必须用parseFloat。
cur=Math.round(parseFloat(getStyle(obj, attr))*100); // Math.round(); 四舍五入，舍去小数。
} 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)+')'; // '+ var +' 字符串中引入变量的格式。 obj.style.opacity=(cur+speed)/100; //透明度兼容性问题需要2种分别赋值。 } else { obj.style[attr]=cur+speed+'px'; //这里的字符串连接方式？ } } }, 30); } </script> </head> <body> <div id="div1"></div> </body> </html>
