jokerFei
2016-04-20 17:24
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,ul{margin: 0;padding: 0;} ul,li{ list-style: none; } li{ background: yellow; width: 200px; height: 100px; border: 10px solid #000; margin-bottom: 10px; } </style> </head> <body> <script type="text/javascript"> window.onload = function(){ var ali = document.getElementsByTagName('li'); for (var i = 0; i < ali.length; i++) { ali[i].timer = null; ali[i].onmouseover = function(){ startMove(this,400); } ali[i].onmouseout = function(){ startMove(this,200); } } } function getStyle(obj.attr){ if (obj.currentStyle) { return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } function startMove(obj,ita){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var pg = parseInt(getStyle(obj,'width')); var speed = (ita - pg)/10; speed = speed > 0?Math.ceil(speed):Math.floor(speed); if (ita == pg) { clearInterval(obj.timer); } else{ obj.style['width'] = pg + speed +'px'; } },30) } </script> <ul> <li id="li1"></li> <li id="li2"></li> </ul> </body> </html>
function getStyle(obj.attr),参数是逗号亲,看清楚!
JS动画效果
113925 学习 · 1443 问题
相似问题