首頁(yè) 猿問(wèn) 詭異的效果，為什么不是一直增加，而...

詭異的效果，為什么不是一直增加，而是每次增加一小段

JavaScript

琢匠 2016-01-16 09:58:19

<!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貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超2個(gè)贊

查看其它人的代碼，終于找出問(wèn)題在哪了，var icur = parseInt(getStyle(obj,'width'));（語(yǔ)句1）這句應(yīng)該包含在obj.timer = setInterval(function(){}（語(yǔ)句2）內(nèi)，原因分析了一下，應(yīng)該是當(dāng)語(yǔ)句1在外面時(shí)，icur值固定，變化一次后，speed值為零，width不在變化

反對(duì) 回復(fù) 2016-01-16