Python程序猿
2016-04-04 16:12
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>链式运动框架</title> <style type="text/css"> body,ul,li{ margin: 0; padding: 0; } ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border:4px solid #000; filter:alpha(opacity:30); opacity:0.3; } </style> <script src="move.js"></script> <script> window.onload=function(){ var Li=document.getElementById('li1'); Li.onmouseover=function(){ startMove(Li,'width',400); } } </script> </head> <body> <ul> <li id="li1"></li> </ul> </body> </html> --------- //获取样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; // if IE } else{ return getComputedStyle(obj,false)[attr]; //if FireFox } } function startMove(obj,attr,iIarget){ clearInterval(obj.timer); obj.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(obj.timer); //判断是否传入了fn //if(fn){ //fn(); //} }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); };
上传问题前建议自己认认真真仔仔细细的检查多遍。
第51行!iTarget你打成了iIerget!
这样运行的时候当然是找不到下面的iTarget的。
JS动画效果
113925 学习 · 1443 问题
相似问题
回答 1
回答 4