El movimiento acelerado significa que un objeto se mueve cada vez más rápido; El movimiento desacelerado significa que un objeto se mueve más y más lento. Ahora use JavaScript para simular estos dos efectos. El principio es usar SetInterval o SetTimeOut para cambiar dinámicamente la distancia entre un elemento y otro elemento, como xxx.style.left o xxx.style.marginleft, y luego aumentar la velocidad después de cada ejercicio, de modo que aparece el efecto de acelerar el movimiento. Lo mismo es cierto para desacelerar el movimiento.
Aquí hay dos ejemplos:
Acelerar el movimiento
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> JavaScript Accelerated Motion </title>
<style type = "text/css">
* {margen: 0; relleno: 0;}
.div1 {ancho: 100px; Altura: 100px; Antecedentes: URL #F60 (qiuweeguan.gif) centro de centro sin repetición;}
</style>
<script type = "text/javaScript">
var $$ = function (id) {
return document.getElementById (id);
}
window.onload = function () {
var obtn = $$ ("btn1");
var odiv = $$ ("div1");
VAR TIMER = NULL;
Vel Speed = 0;
oBT.OnClick = function () {
ClearInterval (temporizador);
timer = setInterval (function () {
velocidad ++;
odiv.style.marginleft = odiv.offsetleft + velocidad + "px";
}, 30);
}
}
</script>
</ablo>
<cuerpo id = "cuerpo">
<botón id = "btn1"> go </boton>
<div id = "div1"> </div>
</body>
</html>
Nota: En este ejemplo, después de hacer clic en Go, el bloque DIV continuará acelerándose a la derecha.
Reducir el ejercicio
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> JavaScript Reduction Movement </title>
<style type = "text/css">
* {margen: 0; relleno: 0;}
.div1 {ancho: 100px; Altura: 100px; Antecedentes: URL #F60 (qiuweeguan.gif) centro de centro sin repetición;}
</style>
<script type = "text/javaScript">
var $$ = function (id) {
return document.getElementById (id);
}
window.onload = function () {
var obtn = $$ ("btn1");
var odiv = $$ ("div1");
VAR TIMER = NULL;
velocidad var = 30;
oBT.OnClick = function () {
ClearInterval (temporizador);
timer = setInterval (function () {
velocidad - ;
odiv.style.marginleft = odiv.offsetleft + velocidad + "px";
}, 30);
}
}
</script>
</ablo>
<cuerpo id = "cuerpo">
<botón id = "btn1"> go </boton>
<div id = "div1"> </div>
</body>
</html>
Nota: En este ejemplo, después de hacer clic en Go, el bloque DIV continuará desacelerando a la derecha hasta que la velocidad disminuya a cero, la velocidad se vuelve negativa y luego se acelerará a la izquierda.