Эффект:
Идея:
Используйте таймер setInerval() для выполнения упражнения. Затем ключевым моментом является дать ему решение заполнить пробел, когда он наконец остановится.
Код:
Скопируйте код кода следующим образом:
<head runat="сервер">
<title></title>
<style type="text/css">
#дел1
{
ширина: 100 пикселей;
высота: 100 пикселей;
фон: #0000FF;
позиция: абсолютная;
слева: 800 пикселей;
верх: 100 пикселей;
}
#div200
{
ширина: 1 пиксель;
высота: 400 пикселей;
фон: #FF0000;
позиция: абсолютная;
слева: 200 пикселей;
}
#div500
{
ширина: 1 пиксель;
высота: 400 пикселей;
фон: #FF0000;
позиция: абсолютная;
слева: 500 пикселей;
}
</стиль>
<тип сценария="текст/javascript">
функция перемещение(конец) {
var oDiv = document.getElementById('div1');
вар таймер = ноль;
таймер = setInterval(функция () {
var Speed = (end - oDiv.offsetLeft) / 5 //Получаем скорость движения на основе конечной точки и offsetLeft;
скорость = скорость > 0 ? Math.ceil(speed) : Math.floor(speed); //Выполняем округление, десятичный знак становится целым числом,
// if (oDiv.offsetLeft <= end) {
// ОчиститьИнтервал(таймер);
// }
// еще {
// oDiv.style.left = oDiv.offsetLeft + скорость + 'px';
// }
if (Math.abs(end - oDiv.offsetLeft) <= скорость) { //Потому что в конце будет небольшой зазор при остановке, или он не полностью достигнет назначенного места, поэтому она должна быть меньше его скорости
ClearInterval(timer); //Когда расстояние меньше скорости, останавливаем таймер
oDiv.style.left = end + 'px' // Заполняем пробел после остановки.
}
еще {
oDiv.style.left = oDiv.offsetLeft + скорость + 'px' //Переместить DIV;
}
}, 30)
}
</скрипт>
</голова>
<тело>
<input type="button" id="btn1" value="На позицию 500" onclick="move(500);" />
<input type="button" id="btn2" value="В позицию 200" onclick="move(200);" />
<div id="div1">
</div>
<div id="div200">200
</div>
<div id="div500">500
</div>
</тело>