가속화 된 움직임은 물체가 더 빠르고 빠르게 움직이고 있음을 의미합니다. 감속 된 움직임은 물체가 느리고 느리게 움직이는 것을 의미합니다. 이제 JavaScript를 사용 하여이 두 가지 효과를 시뮬레이션하십시오. 원칙은 setInterval 또는 settimeout을 사용하여 xxx.style.left 또는 xxx.style.marginleft와 같은 하나의 요소와 다른 요소 사이의 거리를 동적으로 변경 한 다음 각 운동 후 속도를 높이고 움직임을 가속화하는 효과가 나타나는 것입니다. 운동을 감속하는 것도 마찬가지입니다.
다음은 다음은 다음과 같습니다.
움직임을 가속화하십시오
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> JavaScript Accelerated Motion </title>
<스타일 유형 = "텍스트/CSS">
* {마진 : 0; 패딩 : 0;}
.div1 {너비 : 100px; 높이 : 100px; 배경 : #f60 URL (qiuweiguan.gif) No-Repeat Center;}
</스타일>
<script type = "text/javaScript">
var $$ = function (id) {
return document.getElementById (id);
}
Window.onload = function () {
var obtn = $$ ( "btn1");
var odiv = $$ ( "div1");
var timer = null;
var 속도 = 0;
obtn.onclick = function () {
ClearInterval (타이머);
타이머 = setInterval (function () {
속도 ++;
odiv.style.marginleft = odiv.offsetleft + speed + "px";
}, 30);
}
}
</스크립트>
</head>
<Body ID = "Body">
<버튼 id = "btn1"> go </button>
<div id = "div1"> </div>
</body>
</html>
참고 :이 예에서는 GO를 클릭 한 후 DIV 블록이 오른쪽으로 계속 가속됩니다.
운동을 줄입니다
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> JavaScript 감소 운동 </title>
<스타일 유형 = "텍스트/CSS">
* {마진 : 0; 패딩 : 0;}
.div1 {너비 : 100px; 높이 : 100px; 배경 : #f60 URL (qiuweiguan.gif) No-Repeat Center;}
</스타일>
<script type = "text/javaScript">
var $$ = function (id) {
return document.getElementById (id);
}
Window.onload = function () {
var obtn = $$ ( "btn1");
var odiv = $$ ( "div1");
var timer = null;
var 속도 = 30;
obtn.onclick = function () {
ClearInterval (타이머);
타이머 = setInterval (function () {
속도 -;
odiv.style.marginleft = odiv.offsetleft + speed + "px";
}, 30);
}
}
</스크립트>
</head>
<Body ID = "Body">
<버튼 id = "btn1"> go </button>
<div id = "div1"> </div>
</body>
</html>
참고 :이 예에서는 GO를 클릭 한 후 DIV 블록이 속도가 0으로 감소 할 때까지 오른쪽으로 계속 감속됩니다. 속도가 음수가 된 다음 왼쪽으로 가속됩니다.