Python程序猿
2016-04-04 12:20
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>获取属性动画2</title> <style type="text/css"> *{margin:0; padding:0;} ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 10px solid #000; filter:alpha(opacity:30); opacity:0.3; } </style> <script type="text/javascript"> window.onload=function(){ var Li1=document.getElementById('li1'); Li1.onmouseover=function(){ startMove(this,'opacity',100); } Li1.onmouseout=function(){ startMove(this,'opacity',30); } } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];}//针对IE浏览器 else{ return getComputedStyle(obj,false)[attr];//针对火狐浏览器 } } //var timer=null; var alpha=30; function startMove(obj,attr,iTarget) { clearInterval(obj.timer); obj.timer=setInterval(function() { var icur=0; if(attr=='opacity') { icur=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(obj.timer); } else { if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; } else{ //obj.style.width=icur+speed+'px'; obj.style[attr]=icur+speed+'px'; } } },30) } </script> </head> <body> <ul> <li id="li1"></li> </ul> </body> </html>
第51行
parseFloat(getStyle(obj.attr))
你写错了,中间是","。
应该是
parseFloat(getStyle(obj,attr))
这样就没问题了
JS动画效果
113925 学习 · 1443 问题
相似问题
回答 3
回答 2
回答 1
回答 4
回答 2