Mari kita lihat kod gerakan sebelumnya untuk melihat sama ada ia menyokong gerakan berbilang objek dan jenis masalah yang mungkin timbul. Salin kod Kod adalah seperti berikut: <br> div {<br> lebar: 100px;<br> Tinggi: 50px;<br> latar belakang: merah;<br> jidar: 10px;<br> }<br> <br> </div> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="48754" class="copybut" id="copybut48754" onclick="doCopy('code48754')">Salin kod<u></u></a> Kod adalah seperti berikut:</span></div> <div class="codebody" id="code48754"> <badan><br> </body><br> <br><br> <br>Berikut ialah kod Javascript: <br> </div> <p></p> <p>Salin kod</p> <div class="codetitle"><span><a style="CURSOR: pointer" data="26727" class="copybut" id="copybut26727" onclick="doCopy('code26727')"> Kod adalah seperti berikut:<u><div class="codebody" id="code26727"> <br> <script type="text/javascript"><br> window.onload = function() {<br> var aDiv = document.getElementsByTagName('div');<br> untuk (var i = 0; i < aDiv.length; i ) {<br /> aDiv[i].onmouseover = function() {<br /> startMove(ini, 400);<br /> };<br /> aDiv[i].onmouseout = function() {<br /> startMove(ini, 100);<br /> };<br /> }<br /> }<br /> pemasa var = null;<br /> fungsi startMove(obj, iTarget) {<br /> clearInterval(pemasa);<br /> pemasa = setInterval(function() {<br /> kelajuan var = (iTarget - obj.offsetWidth) / 6;<br /> kelajuan = kelajuan > 0 ? Math.ceil(kelajuan) : Math.floor(kelajuan);<br> if (obj.offsetWidth == iTarget) {<br> clearInterval(pemasa);<br> } lain {<br> obj.style.width = obj.offsetWidth kelajuan 'px';<br> }<br> }, 30);<br> }<br> </skrip><br> </div> </u><p>此时当鼠标移入到第一个div 时，他是正常运行的。但是如果现在又移劬中中中可时候就会出现bug。</p> <p>imej 这个是什么原因呢？ 看图可以看出并没有运动完成。实际上是这栎的，整个程序就一个定时器, 比如第一个div开始动了，第二个div 鼠标移入了掉了，那么自然就卡在那里了。</p> <p> </p>所以最大的问题就是整个程序就只有一个定时器。那么怎么解决这个个闢鼢 <p></p>解决方案：<p><strong> </strong>其实很简单，把定时器作为一个物体的属性加上,那么每个物体都有为一个物体的属性加上,那么每个物体都有一一个家时器的时候是关闭物体上的定时器,开也是物体上的定时器</p> <p>那么他们之间就可以完全互不干扰的运行。</p> <p>看下修改后的Javascript代码：</p> <p></p> <p></p> <div class="codetitle"><span>复制代码<a style="CURSOR: pointer" data="66248" class="copybut" id="copybut66248" onclick="doCopy('code66248')"><u></u> 代码如下:</a><div class="codebody" id="code66248"> <br> <script type="text/javascript"><br> window.onload = function() {<br> var aDiv = document.getElementsByTagName('div');<br> untuk (var i = 0; i < aDiv.length; i ) {<br /> aDiv[i].timer=null; // Simpan pemasa sebagai atribut objek <br /> aDiv[i].onmouseover = function() {<br /> StartMove(ini, 400);<br /> };<br /> aDiv[i].onmouseout = function() {<br /> StartMove(ini, 100);<br /> };<br /> }<br /> }<br /> fungsi startMove(obj, iTarget) {<br /> Clearinterval (obj.timer); obj.timer = setInterval(function() {<br /> kelajuan var = (iTarget - obj.offsetWidth) / 6;<br /> Kelajuan = kelajuan > 0 ? Math.ceil(speed) : Math.floor(speed);<br> Jika (obj.offsetWidth == iTarget) {<br> } lain {<br> Obj.style.width = obj.offsetWidth Speed 'PX'; }<br> }, 30);<br> }<br> <br><br> <br>Dengan cara ini, program ini tidak akan menghadapi masalah dan boleh menyokong pergerakan berbilang objek. <br> </div></span></div></a></span></div>
