该练习的笔记如下:
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>