Movimento acelerado significa que um objeto está se movendo cada vez mais rápido; Movimento desacelerado significa que um objeto está se movendo mais lento e lento. Agora use JavaScript para simular esses dois efeitos. O princípio é usar o setInterval ou o setTimeout para alterar dinamicamente a distância entre um elemento e outro elemento, como xxx.style.left ou xxx.style.marginleft e depois aumentar a velocidade após cada exercício, para que o efeito de acelerar o movimento apareça. O mesmo vale para desacelerar o movimento.
Aqui estão dois exemplos:
Acelerar o movimento
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> JavaScript acelerou o movimento </ititure>
<style type = "text/css">
* {margem: 0; preenchimento: 0;}
.div1 {width: 100px; Altura: 100px; Antecedentes: #F60 URL (qiuweiguan.gif) No Center Center;}
</style>
<script type = "text/javascript">
var $$ = function (id) {
retornar document.getElementById (id);
}
window.onload = function () {
var obtn = $$ ("btn1");
var odiv = $$ ("div1");
Var Timer = NULL;
var velocidade = 0;
obtn.OnClick = function () {
ClearInterval (timer);
Timer = setInterval (function () {
velocidade ++;
odiv.style.marginleft = odiv.offsetleft + velocidade + "px";
}, 30);
}
}
</script>
</head>
<Body id = "Body">
<botão id = "btn1"> vá </botão>
<div id = "div1"> </div>
</body>
</html>
NOTA: Neste exemplo, depois de clicar em Go, o Div Block continuará a acelerar para a direita.
Reduzir o exercício
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<Title> Javascript Reduction Movement </title>
<style type = "text/css">
* {margem: 0; preenchimento: 0;}
.div1 {width: 100px; Altura: 100px; Antecedentes: #F60 URL (qiuweiguan.gif) No Center Center;}
</style>
<script type = "text/javascript">
var $$ = function (id) {
retornar document.getElementById (id);
}
window.onload = function () {
var obtn = $$ ("btn1");
var odiv = $$ ("div1");
Var Timer = NULL;
var velocidade = 30;
obtn.OnClick = function () {
ClearInterval (timer);
Timer = setInterval (function () {
velocidade - ;
odiv.style.marginleft = odiv.offsetleft + velocidade + "px";
}, 30);
}
}
</script>
</head>
<Body id = "Body">
<botão id = "btn1"> vá </botão>
<div id = "div1"> </div>
</body>
</html>
NOTA: Neste exemplo, depois de clicar em Go, o bloco Div continuará desacelerando para a direita até que a velocidade diminua para zero, a velocidade se tornará negativa e depois acelera para a esquerda.