دعونا أولاً نلقي نظرة على رمز الحركة السابق ، سواء كان يدعم حركة كائنات متعددة ، وما هي المشكلات التي ستنشأ.
نسخة الكود كما يلي:
<type type = "text/css">
ديف {
العرض: 100px ؛
الارتفاع: 50 بكسل ؛
الخلفية: أحمر.
الهامش: 10px ؛
}
</style>
نسخة الكود كما يلي:
<body>
<viv> </viv>
<viv> </viv>
<viv> </viv>
</body>
هنا هو رمز JavaScript:
نسخة الكود كما يلي:
<script type = "text/javaScript">
window.onload = function () {
var adiv = document.getElementsByTagName ('div') ؛
لـ (var i = 0 ؛ i <adiv.length ؛ i ++) {
adiv [i] .onmouseover = function () {
StartMove (هذا ، 400) ؛
} ؛
adiv [i] .onmouseout = function () {
StartMove (هذا ، 100) ؛
} ؛
}
}
var timer = null ؛
وظيفة StartMove (OBJ ، Itarget) {
ClearInterval (مؤقت) ؛
Timer = setInterval (function () {
var speed = (itarget - obj.offsetWidth) / 6 ؛
السرعة = السرعة> 0؟ Math.ceil (السرعة): Math.Floor (السرعة) ؛
if (obj.offsetWidth == Itarget) {
ClearInterval (مؤقت) ؛
} آخر {
obj.style.width = obj.offsetWidth + speed + 'px' ؛
}
} ، 30) ؛
}
</script>
في هذا الوقت ، عندما ينتقل الماوس إلى Div الأول ، فإنه يعمل بشكل طبيعي. ولكن إذا انتقلت إلى Div الثاني أو الثالث الآن ، فستحصل على خطأ.
صورة ما سبب هذا؟ بالنظر إلى الصورة ، يمكنك أن ترى أن الحركة لم تكتمل. في الواقع ، هذا هو الحال ،
البرنامج بأكمله هو مجرد مؤقت. على سبيل المثال ، يبدأ DIV الأول في التحرك ، وينتقل Div الثاني إلى المؤقت السابق ويقتل ، لذلك سوف يتعثر بشكل طبيعي هناك.
لذا فإن المشكلة الأكبر هي أن البرنامج بأكمله لديه مؤقت واحد فقط. فكيف تحل هذه المشكلة؟
حل:
في الواقع ، الأمر بسيط للغاية. أضف المؤقت كسممة كائن ، لذلك كل كائن لديه مؤقت. عند إيقاف تشغيل المؤقت ، يكون الموقت على الكائن ، والموقت الموجود على الكائن هو أيضًا الموقت على الكائن.
ثم يمكنهم العمل دون تدخل مع بعضهم البعض.
انظر إلى رمز JavaScript المعدل:
نسخة الكود كما يلي:
<script type = "text/javaScript">
window.onload = function () {
var adiv = document.getElementsByTagName ('div') ؛
لـ (var i = 0 ؛ i <adiv.length ؛ i ++) {
adiv [i] .timer = null ؛ // احفظ المؤقت كخاصية كائن
adiv [i] .onmouseover = function () {
StartMove (هذا ، 400) ؛
} ؛
adiv [i] .onmouseout = function () {
StartMove (هذا ، 100) ؛
} ؛
}
}
وظيفة StartMove (OBJ ، Itarget) {
ClearInterval (Obj.timer) ؛
obj.timer = setInterval (function () {
var speed = (itarget - obj.offsetWidth) / 6 ؛
السرعة = السرعة> 0؟ Math.ceil (السرعة): Math.Floor (السرعة) ؛
if (obj.offsetWidth == Itarget) {
ClearInterval (Obj.timer) ؛
} آخر {
obj.style.width = obj.offsetWidth + speed + 'px' ؛
}
} ، 30) ؛
}
</script>
وبهذه الطريقة ، لن يواجه البرنامج أي مشاكل ويمكنه دعم حركة كائنات متعددة.