<!DOCTYPE html><html><head> <title></title> <style type="text/css">*{ margin: 0;padding: 0;}ui,li{}ul li{ width: 200px; height: 100px; background-color: #ff0; margin: 20px; list-style-type: none; border: 4px solid #000;} </style> <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,iTarget){ clearInterval(obj.timer); var icur = parseInt(getStyle(obj,'width')); obj.timer = setInterval(function(){ var speed = (iTarget-icur)/8; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if (icur == iTarget) { clearInterval(obj.timer); }else{ obj.style['width'] = icur + speed +"px"; } },30)}</script></head><body><ul> <li></li> <li></li> <li></li> <li></li></ul></body></html>
詭異的效果，為什么不是一直增加，而是每次增加一小段
琢匠
2016-01-16 09:58:19
