ผล:
ความคิด:
ขั้นแรก ให้โหลด onscroll เพื่อควบคุมแถบเลื่อน จากนั้นเขียนวิธีบัฟเฟอร์การเคลื่อนที่ วิธีแรกคือคำนวณความเร็วของบัฟเฟอร์ DIV ปัดเศษขึ้น จากนั้นจึงทำการเคลื่อนไหวเพื่อกำหนดว่าเมื่อถึงจุดสิ้นสุด ในที่สุดก็ส่งคืนพารามิเตอร์ จากนั้นเรียกเมธอดนี้ใน onscroll และคำนวณจุดสิ้นสุดและกำหนดให้กับพารามิเตอร์ของเมธอดนี้
รหัส:
คัดลอกรหัสรหัสดังต่อไปนี้:
<หัว runat="เซิร์ฟเวอร์">
<title></title>
<style type="text/css">
#div1
-
ความกว้าง: 200px;
ความสูง: 200px;
พื้นหลัง: #0000FF;
ตำแหน่ง: แน่นอน;
ขวา: 0;
ด้านล่าง: 0;
-
</สไตล์>
<script type="text/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 + ความสูงของมือถือ
-
ตัวจับเวลา var = null;
ฟังก์ชั่นย้าย (สิ้นสุด) {
clearInterval(timer); //ก่อนอื่น ให้ปิด setInterval ที่เปิดไว้ก่อนหน้านี้;
จับเวลา = setInterval (ฟังก์ชั่น () {
var oDiv = document.getElementById('div1');
ความเร็ว var = (end - oDiv.offsetTop) / 5; // คำนวณความเร็วของ DIV ความเร็วของ DIV เท่ากับ (จุดสิ้นสุด - ความสูง offsetTop) / ตัวประกอบสเกล
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //เพื่อหลีกเลี่ยงการเกิดทศนิยม ให้ปัดเศษให้เป็นจำนวนเต็ม
if (oDiv.offsetTop == end) { //เมื่อ DIV ถึงจุดสิ้นสุด ให้ปิด setInterval;
clearInterval (จับเวลา);
-
อื่น {
oDiv.style.top = oDiv.offsetTop + ความเร็ว + 'px'; // ย้าย div
-
}, 30);
-
</สคริปต์>
</หัว>
<body style="height: 1000px;">
<div id="div1">
</div>
</ร่างกาย>