<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getStyle-1</title>
<style type="text/css">
*{margin: 0;padding: 0;border: 0;}
ul li{
list-style-type: none;
margin: 10px;
background-color: #2e9fdb;
width: 200px;
height: 100px;
border: 1px solid red;
filter:alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
<script>
var li1=document.getElementById("li1");
li1.onmouseover=function(){
startMove(this,"width",400);
};
li1.onmouseout=function(){
startMove(this,"width",100);
};
var timer=null;
// alert(0.03*100)//3
// alert(0.07*100)//7.000000000001
// alert(Math.round(0.07*100))//7, 四舍五入取整
function startMove(obj,aTtr,iTarget){
clearInterval(timer);
timer=setInterval(function(){
var iCur=0;
if(aTtr=="opacity"){
iCur=Math.round(parseFloat(getStyle(obj,aTtr))*100);
}
else{
iCur=parseInt(getStyle(obj,aTtr));
}
var speed=(iTarget-iCur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(iCur==iTarget){
clearInterval(timer);
}
else{
if(aTtr="opacity"){
obj.style.filter="alpha(opacity:"+(iCur+speed)+")";
obj.style.opacity=(iCur+speed)/100;
}
else {
obj.style[aTtr]=iCur+speed+"px";
}
}
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
</body>
</html>
53行aTtr=="opacity"