Эффект:
Идея:
Сначала загрузите onscroll для управления полосой прокрутки. Затем напишите метод буферизации движения. Метод буферизации движения заключается в том, чтобы сначала вычислить скорость буфера DIV, округлить ее в большую сторону, а затем выполнить движение, чтобы определить момент достижения конечной точки. Наконец, возвращаются его параметры. Затем вызовите этот метод при прокрутке, вычислите конечную точку и присвойте ее параметрам этого метода.
Код:
Скопируйте код кода следующим образом:
<head runat="сервер">
<title></title>
<style type="text/css">
#дел1
{
ширина: 200 пикселей;
высота: 200 пикселей;
фон: #0000FF;
позиция: абсолютная;
правильно: 0;
внизу: 0;
}
</стиль>
<тип сценария="текст/javascript">
window.onscroll = функция () {
var oDiv = document.getElementById('div1');
var DivScroll = document.documentElement.scrollTop || document.body.scrollTop //Получаем высоту перемещения;
// oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll)); //Вызываем параметры, а параметры внутри являются конечными точками DIV. То есть (визуальная высота – высота DIV)/2 + высота мобильного устройства.
};
вар таймер = ноль;
функция перемещение(конец) {
ClearInterval(timer); //Сначала закрываем ранее открытый setInterval;
таймер = setInterval(функция () {
var oDiv = document.getElementById('div1');
var скорость = (end - oDiv.offsetTop) / 5 //Рассчитываем скорость DIV. Скорость DIV равна (конечная точка - высота offsetTop)/коэффициент масштабирования.
скорость = скорость > 0 ? Math.ceil(speed) : Math.floor(speed); //Чтобы избежать десятичных дробей, округлите их;
if (oDiv.offsetTop == end) { //Когда DIV достигнет конца, закрываем setInterval;
ClearInterval (таймер);
}
еще {
oDiv.style.top = oDiv.offsetTop + скорость + 'px' //Перемещение элемента div;
}
}, 30);
}
</скрипт>
</голова>
<body style="высота: 1000 пикселей;">
<div id="div1">
</div>
</тело>