function startMove(obj,purpose,attr,fn){ var target=0; clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed = 0; if(attr == 'opacity'){ target = Math.round(parseFloat(getStyle(obj,attr))*100); purpose=purpose*100; }else{ target=parseInt(getStyle(obj,attr)); } speed = (purpose-target)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(target==purpose){ clearInterval(obj.timer); if(fn){ fn(); } }else{ target=target+speed; if(attr == 'opacity'){ obj.style.opacity=target/100; }else{ obj.style[attr]=target+'px'; } } },30) } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
上面是js代码,下面是html代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>链式运动</title> <style type="text/css"> *{margin: 0;padding: 0;} ul{list-style: none;} ul li{width:200px;height: 100px;background: yellow;opacity: 0.3;border: 3px solid green;} </style> <script type="text/javascript" src="js/script.js"></script> <script> window.onload=function(){ var li = document.getElementsByTagName("li")[0]; li.onmouseover=function(){ startMove(li,400,'width',function(){ startMove(li,1,'opacity'); }); } } </script> </head> <body> <ul> <li></li> </ul> </body> </html>
这样是可以链式执行的,但是吧上面的顺序换一下就不行了,求帮助
第17行
startMove(li,1,'opacity');
应该是100
这个改了之后还是有点问题,我把那个三元表达式重写成if-else语句之后就好了......并不懂为什么,我的三元表达式有写错吗T-T
我把 purpose=purpose*100;删掉了,然后把传参换成了自己乘了100了就可以了,但是我不懂为什么,求个好心人解答一下,先谢谢了