ก่อนอื่นให้ดูที่รหัสการเคลื่อนไหวก่อนหน้านี้ไม่ว่าจะสนับสนุนการเคลื่อนไหวของวัตถุหลาย ๆ วัตถุและปัญหาใดที่จะเกิดขึ้น
การคัดลอกรหัสมีดังนี้:
<style type = "text/css">
Div {
ความกว้าง: 100px;
ความสูง: 50px;
ความเป็นมา: สีแดง;
มาร์จิ้น: 10px;
-
</style>
การคัดลอกรหัสมีดังนี้:
<body>
<div> </div>
<div> </div>
<div> </div>
</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 = null;
ฟังก์ชั่น startmove (obj, itarget) {
ClearInterval (ตัวจับเวลา);
timer = setInterval (ฟังก์ชัน () {
var speed = (itarget - obj.offsetWidth) / 6;
ความเร็ว = ความเร็ว> 0? Math.Ceil (ความเร็ว): Math.Floor (ความเร็ว);
if (obj.offsetWidth == itarget) {
ClearInterval (ตัวจับเวลา);
} อื่น {
obj.style.width = obj.offsetWidth + ความเร็ว + '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 + ความเร็ว + 'px';
-
}, 30);
-
</script>
ด้วยวิธีนี้โปรแกรมจะไม่มีปัญหาและสามารถรองรับการเคลื่อนไหวของวัตถุหลายชิ้น