Jetons d'abord un coup d'œil au code de mouvement précédent pour voir s'il prend en charge le mouvement multi-objets et quels types de problèmes peuvent survenir. Copier le code Le code est le suivant : <br> div {<br> largeur : 100 px ;<br> Hauteur : 50 px ;<br> fond : rouge ;<br> marge : 10 px ;<br> }<br> <br> </div> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="48754" class="copybut" id="copybut48754" onclick="doCopy('code48754')">Copier le code<u></u></a> Le code est le suivant :</span></div> <div class="codebody" id="code48754"> <corps><br> </corps><br> <br><br> <br>Voici le code Javascript : <br> </div> <p></p> <p>Copier le code</p> <div class="codetitle"><span><a style="CURSOR: pointer" data="26727" class="copybut" id="copybut26727" onclick="doCopy('code26727')"> Le code est le suivant :<u><div class="codebody" id="code26727"> <br> <script type="text/javascript"><br> window.onload = function() {<br> var aDiv = document.getElementsByTagName('div');<br> pour (var i = 0; i < aDiv.length; i ) {<br /> aDiv[i].onmouseover = function() {<br /> startMove(this, 400);<br /> };<br /> aDiv[i].onmouseout = function() {<br /> startMove(this, 100);<br /> };<br /> ><br /> ><br /> var minuterie = null;<br /> fonction startMove(obj, iTarget) {<br /> clearInterval(minuterie);<br /> minuterie = setInterval(function() {<br /> var vitesse = (iTarget - obj.offsetWidth) / 6;<br /> vitesse = vitesse > 0 ? Math.ceil(vitesse) : Math.floor(vitesse);<br /> if (obj.offsetWidth == iTarget) {<br /> clearInterval(minuterie);<br /> } autre {<br /> obj.style.width = obj.offsetWidth vitesse 'px';<br /> ><br /> }, 30);<br /> ><br /> </script><br> </div> </u><p>此时当鼠标移入到第一个div 时，他是正常运行的。但是如果现在又移动到第二个或者第三个div时候就会出现bug。</p> <p>image 这个是什么原因呢？ 看图可以看出并没有运动完成。实际上是这样的，</p> <p>整个程序就一个定时器, 比如第一个div开始动了，第二个div 鼠标移入了 前一个定时器就被干掉了，那么自然就卡在那里了。</p> <p> </p> <p>解决方案：<strong></strong> </p>其实很简单，把定时器作为一个物体的属性加上,那么每个物体都有一个定时器在，当关闭定时器的时候是关闭物体上的定时器,开也是物体上的定时器<p> </p>那么他们之间就可以完全互不干扰的运行。<p> </p>看下修改后的Javascript代码：<p> </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="66248" class="copybut" id="copybut66248" onclick="doCopy('code66248')">复制代码<u></u></a> 代码如下 :</span><div class="codebody" id="code66248"> <br> <script type="text/javascript"><br> window.onload = function() {<br> var aDiv = document.getElementsByTagName('div');<br> pour (var i = 0; i < aDiv.length; i ) {<br /> aDiv[i].timer=null; // Stocke le minuteur comme attribut d'un objet <br /> aDiv[i].onmouseover = function() {<br /> StartMove(this, 400);<br /> };<br /> aDiv[i].onmouseout = function() {<br /> StartMove(this, 100);<br /> };<br /> }<br /> }<br /> fonction startMove(obj, iTarget) {<br /> Clearinterval (obj.timer); <br /> obj.timer = setInterval(function() {<br /> var speed = (iTarget - obj.offsetWidth) / 6;<br /> Vitesse = vitesse > 0 ? Math.ceil(vitesse) : Math.floor(vitesse);<br> Si (obj.offsetWidth == iTarget) {<br> } autre {<br> puisque obj.style.width = obj.offsetWidth speed 'px';<br> }<br> }, 30);<br> }<br> <br><br> </div>De cette façon, le programme n'aura aucun problème et pourra prendre en charge le mouvement de plusieurs objets. </div></a></span></div>
