Pelaksanaan Javascript kemahiran motion_javascript berbilang objek

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: div { lebar: 100px; Tinggi: 50px; latar belakang: merah; jidar: 10px; }

Salin kod Kod adalah seperti berikut:

Berikut ialah kod Javascript:

Salin kod

Kod adalah seperti berikut: window.onload = function() { var aDiv = document.getElementsByTagName('div'); untuk (var i = 0; i aDiv[i].onmouseover = function() { startMove(ini, 400); }; aDiv[i].onmouseout = function() { startMove(ini, 100); }; } } pemasa var = null; fungsi startMove(obj, iTarget) { clearInterval(pemasa); pemasa = setInterval(function() { kelajuan var = (iTarget - obj.offsetWidth) / 6; kelajuan = kelajuan > 0 ? Math.ceil(kelajuan) : Math.floor(kelajuan); if (obj.offsetWidth == iTarget) { clearInterval(pemasa); } lain { obj.style.width = obj.offsetWidth kelajuan 'px'; } }, 30); } 此时当鼠标移入到第一个div 时，他是正常运行的。但是如果现在又移劬中中中可时候就会出现bug。

imej 这个是什么原因呢？ 看图可以看出并没有运动完成。实际上是这栎的，整个程序就一个定时器, 比如第一个div开始动了，第二个div 鼠标移入了掉了，那么自然就卡在那里了。

所以最大的问题就是整个程序就只有一个定时器。那么怎么解决这个个闢鼢

解决方案： 其实很简单，把定时器作为一个物体的属性加上,那么每个物体都有为一个物体的属性加上,那么每个物体都有一一个家时器的时候是关闭物体上的定时器,开也是物体上的定时器

那么他们之间就可以完全互不干扰的运行。

看下修改后的Javascript代码：

复制代码 代码如下: window.onload = function() { var aDiv = document.getElementsByTagName('div'); untuk (var i = 0; i aDiv[i].timer=null; // Simpan pemasa sebagai atribut objek aDiv[i].onmouseover = function() { StartMove(ini, 400); }; aDiv[i].onmouseout = function() { StartMove(ini, 100); }; } } fungsi startMove(obj, iTarget) { Clearinterval (obj.timer); obj.timer = setInterval(function() { kelajuan var = (iTarget - obj.offsetWidth) / 6; Kelajuan = kelajuan > 0 ? Math.ceil(speed) : Math.floor(speed); Jika (obj.offsetWidth == iTarget) { } lain { Obj.style.width = obj.offsetWidth Speed 'PX'; } }, 30); }

Dengan cara ini, program ini tidak akan menghadapi masalah dan boleh menyokong pergerakan berbilang objek.