Ускоренное движение означает, что объект движется быстрее и быстрее; Загрязненное движение означает, что объект движется медленнее и медленнее. Теперь используйте JavaScript для моделирования этих двух эффектов. Принцип состоит в том, чтобы использовать SetInterval или SetTimeout для динамического изменения расстояния между одним элементом и другим элементом, таким как xxx.style.left или xxx.style.marginleft, а затем увеличивает скорость после каждого упражнения, так что появляется эффект ускорения движения. То же самое верно для замедления движения.
Вот два примера:
Ускорение движения
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<Title> JavaScript ускорил движение </title>
<стиль типа = "text/css">
* {маржа: 0; Надо: 0;}
.div1 {ширина: 100px; высота: 100px; Справочная информация: #f60 url (qiuweiguan.gif) Центр без повторного оборудования;}
</style>
<script type = "text/javascript">
var $$ = function (id) {
return document.getElementbyId (id);
}
window.onload = function () {
var octn = $$ ("btn1");
var Odiv = $$ ("div1");
var timer = null;
var speed = 0;
optn.onclick = function () {
ClearInterval (таймер);
timer = setInterval (function () {
скорость ++;
Odiv.Style.marginleft = Odiv.OffSetleft + Speed + "px";
}, 30);
}
}
</script>
</head>
<body id = "body">
<button id = "btn1"> go </button>
<div id = "div1"> </div>
</body>
</html>
ПРИМЕЧАНИЕ. В этом примере, после нажатия GO, блок DIV будет продолжать ускоряться вправо.
Уменьшить упражнения
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> Движение по сокращению JavaScript </title>
<стиль типа = "text/css">
* {маржа: 0; Надо: 0;}
.div1 {ширина: 100px; высота: 100px; Справочная информация: #f60 url (qiuweiguan.gif) Центр без повторного оборудования;}
</style>
<script type = "text/javascript">
var $$ = function (id) {
return document.getElementbyId (id);
}
window.onload = function () {
var octn = $$ ("btn1");
var Odiv = $$ ("div1");
var timer = null;
var speed = 30;
optn.onclick = function () {
ClearInterval (таймер);
timer = setInterval (function () {
скорость - ;
Odiv.Style.marginleft = Odiv.OffSetleft + Speed + "px";
}, 30);
}
}
</script>
</head>
<body id = "body">
<button id = "btn1"> go </button>
<div id = "div1"> </div>
</body>
</html>
Примечание. В этом примере, после нажатия GO, блок DIV будет продолжать замедляться вправо, пока скорость не уменьшится до нуля, скорость станет отрицательной, а затем ускоряется влево.