该练习的笔记如下:

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>
05-17 00:10