<!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>
1 回答
琢匠
TA贡献3条经验 获得超2个赞
查看其它人的代码，终于找出问题在哪了，var icur = parseInt(getStyle(obj,'width'));（语句1）这句应该包含在obj.timer = setInterval(function(){}（语句2）内，原因分析了一下，应该是当语句1在外面时，icur值固定，变化一次后，speed值为零，width不在变化
添加回答
举报
0/150
提交
取消