<!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>
2016-09-02
53行aTtr=="opacity"