다중 객체 Motion_javascript 기술의 Javascript 구현

먼저 이전 모션 코드를 살펴보고 다중 객체 모션을 지원하는지, 어떤 문제가 발생할 수 있는지 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다. div { 너비: 100px; 높이: 50px; 배경: 빨간색; 여백: 10px; } >

코드 복사 코드는 다음과 같습니다. > > >

다음은 Javascript 코드입니다.

코드 복사

코드는 다음과 같습니다. window.onload = function() { var aDiv = document.getElementsByTagName('div'); for (var i = 0; i aDiv[i].onmouseover = function() { startMove(this, 400); }; aDiv[i].onmouseout = function() { startMove(this, 100); }; } } var 타이머 = null; 함수 startMove(obj, iTarget) { ClearInterval(타이머); 타이머 = setInterval(function() { var 속도 = (iTarget - obj.offsetWidth) / 6; 속도 = 속도 > 0? Math.ceil(속도) : Math.floor(속도); if (obj.offsetWidth == iTarget) { ClearInterval(타이머); } 그 밖의 { obj.style.width = obj.offsetWidth 속도 'px'; } }, 30); } 此时当鼠标移入到第一个div 时，他是正常运行的.现bug。

이미지 这个是什么原因呢? 看图可以看流并没有运动完成。实际上是这样的，

그게 정말 큰 의미가 있나요?

解决方案：

其实很简单, 把实很简单, 把 정 时 器 为 一 个 물 체성 의 성 加 上, 那 么 每 个 물 体 时 器 에서 当关 闭 정 时器 의 时候 是 闭 罓上당신의 결정, 자산의 결정

더 나은 여행은 불가능합니다.

看下修改后的Javascript代码：

复主代码 代码如下: window.onload = function() { var aDiv = document.getElementsByTagName('div'); for (var i = 0; i aDiv[i].timer=null; // 타이머를 개체의 속성으로 저장 aDiv[i].onmouseover = function() { StartMove(this, 400); }; aDiv[i].onmouseout = function() { StartMove(this, 100); }; } } 기능 startMove(obj, iTarget) { 클리어 간격(obj.timer) obj.timer = setInterval(function() { var 속도 = (iTarget - obj.offsetWidth) / 6; 속도 = 속도 > 0 ? Math.ceil(속도) : Math.floor(속도); If (obj.offsetWidth == iTarget) { ~ ~ } else { Obj.style.width = obj.offsetWidth 속도 'PX' } }, 30); } >

이렇게 하면 프로그램에 문제가 없으며 여러 개체의 이동을 지원할 수 있습니다.