효과:
아이디어:
먼저 onscroll을 로드하여 스크롤 막대를 제어합니다. 그런 다음 모션 버퍼링 방법을 작성합니다. 모션 버퍼링 방법은 먼저 DIV 버퍼의 속도를 계산하고 이를 반올림한 다음 모션을 수행하여 끝점에 도달하는지 확인하는 것입니다. 마지막으로 매개변수를 반환합니다. 그런 다음 onscroll에서 이 메서드를 호출하고 끝점을 계산하여 이 메서드의 매개변수에 할당합니다.
암호:
다음과 같이 코드 코드를 복사합니다.
<head runat="서버">
<제목></제목>
<스타일 유형="텍스트/css">
#div1
{
너비: 200px;
높이: 200px;
배경: #0000FF;
위치: 절대;
오른쪽: 0;
하단: 0;
}
</style>
<스크립트 유형="텍스트/자바스크립트">
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 + 모바일 높이입니다.
};
var 타이머 = null;
함수 이동(끝) {
clearInterval(timer); //먼저 이전에 열려 있던 setInterval을 닫습니다.
타이머 = setInterval(함수 () {
var oDiv = document.getElementById('div1');
var speed = (end - oDiv.offsetTop) / 5; //DIV의 속도를 계산합니다. (end point - offsetTop 높이) / 배율입니다.
speed = 속도 > 0 ? Math.ceil(speed) : Math.floor(speed); //소수점을 피하려면 정수로 반올림하세요.
if (oDiv.offsetTop == end) { //DIV가 끝에 도달하면 setInterval을 닫습니다.
ClearInterval(타이머);
}
또 다른 {
oDiv.style.top = oDiv.offsetTop + 속도 + 'px' //div 이동;
}
}, 30);
}
</script>
</head>
<바디 스타일="높이: 1000px;">
<div 아이디="div1">
</div>
</body>