doits
2017-03-02 00:16
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>777666</title> <style> *{margin:0;padding: 0;} li{ width: 200px; height: 100px; background: #834; margin-bottom: 15px; list-style: none; } </style> <script> window.onload=function(){ var ali = document.getElementsByName('li'); for(var i=0;i<ali.length;i++){ ali[i].onmouseover=function(){ moves(this,400); } ali[i].onmouseout=function(){ moves(this,200); } } } var mytime; function moves(obj,tar){ clearInterval(mytime); mytime=setInterval(function(){ var speed=(tar-obj.offsetWidth)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==tar){ clearInterval(mytime); }else{ obj.style.width=obj.offsetWidth+speed+'px'; } },30) } </script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
终于找到毛病了。。。。。心不够细啊,仅此为戒吧
JS动画效果
113923 学习 · 1443 问题
相似问题