먼저 이전 모션 코드, 여러 객체의 움직임을 지원하는지 여부와 어떤 문제가 발생하는지 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
<스타일 유형 = "텍스트/CSS">
div {
너비 : 100px;
높이 : 50px;
배경 : 빨간색;
여백 : 10px;
}
</스타일>
코드 사본은 다음과 같습니다.
<body>
<div> </div>
<div> </div>
<div> </div>
</body>
JavaScript 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
Window.onload = function () {
var adiv = document.getElementsByTagName ( 'div');
for (var i = 0; i <adiv.length; i ++) {
adiv [i] .onmouseover = function () {
StartMove (this, 400);
};
adiv [i] .onmouseout = function () {
StartMove (this, 100);
};
}
}
var timer = null;
함수 startMove (obj, itarget) {
ClearInterval (타이머);
타이머 = 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);
}
</스크립트>
이 시점에서 마우스가 첫 번째 div로 이동하면 정상적으로 실행됩니다. 그러나 지금 두 번째 또는 세 번째 div로 이동하면 버그가 나타납니다.
이미지 그 이유는 무엇입니까? 그림을 보면 움직임이 완료되지 않았다는 것을 알 수 있습니다. 사실,이 경우입니다.
전체 프로그램은 타이머 일뿐입니다. 예를 들어, 첫 번째 div가 움직이기 시작하고 두 번째 div가 이전 타이머로 이동하여 죽임을 당하므로 자연스럽게 붙어 있습니다.
따라서 가장 큰 문제는 전체 프로그램에 하나의 타이머 만 있다는 것입니다. 그렇다면이 문제를 해결하는 방법은 무엇입니까?
해결책:
사실, 그것은 매우 간단합니다. 타이머를 객체의 속성으로 추가하면 각 객체에 타이머가 있습니다. 타이머가 꺼지면 객체의 타이머이고 객체의 타이머도 객체의 타이머이기도합니다.
그런 다음 서로 간섭하지 않고 작동 할 수 있습니다.
수정 된 JavaScript 코드를보십시오.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
Window.onload = function () {
var adiv = document.getElementsByTagName ( 'div');
for (var i = 0; i <adiv.length; i ++) {
adiv [i] .timer = null; // 타이머를 객체의 속성으로 저장합니다
adiv [i] .onmouseover = function () {
StartMove (this, 400);
};
adiv [i] .onmouseout = function () {
StartMove (this, 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);
}
</스크립트>
이런 식 으로이 프로그램은 아무런 문제가 없으며 여러 객체의 움직임을 지원할 수 있습니다.