ผล:
ความคิด:
ใช้เหตุการณ์ onmousemove เพื่อรับพิกัดของเมาส์ จากนั้นสำรวจ DIV ทีละรายการ และสุดท้ายกำหนดพิกัดของเมาส์ให้กับ DIV
รหัส:
คัดลอกรหัสรหัสดังต่อไปนี้:
<หัว runat="เซิร์ฟเวอร์">
<title></title>
<style type="text/css">
กอง
-
ความกว้าง: 20px;
ความสูง: 20px;
พื้นหลัง: #00FFFF;
ตำแหน่ง: แน่นอน;
-
</สไตล์>
<script type="text/javascript">
document.onmousemove = ฟังก์ชั่น (ev) {
var div = document.getElementsByTagName('div');
var oEvent = ev ||. เหตุการณ์;
var pos = GetMouse(oEvent); //หลังจากพิจารณาความเข้ากันได้แล้ว ให้ใช้ฟังก์ชันการเลื่อนพิกัดของเมาส์เพื่อให้ได้พิกัดแนวนอนและแนวตั้ง
สำหรับ (var i = div.length - 1; i > 0; i--) { //Traverse DIVs โดยเริ่มจากอันสุดท้าย
div[i].style.left = div[i - 1].offsetLeft + 'px'; //ให้ offsetLeft ก่อนหน้ากับอันถัดไป
div[i].style.top = div[i - 1].offsetTop + 'px'; //ให้ offsetTop ก่อนหน้ากับอันถัดไป
-
div[0].style.left = pos.x + 'px'; //ให้ abscissa ของเมาส์ไปที่อันแรก
div[0].style.top = pos.y + 'px'; //ให้พิกัดแนวตั้งของเมาส์เป็นอันแรก
-
function GetMouse(ev) { //รับพิกัดการเคลื่อนที่ของเมาส์
var scrollTop = document.documentElement.scrollTop ||. document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft ||. document.body.scrollLeft;
กลับ { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
-
</สคริปต์>
</หัว>
<ร่างกาย>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</ร่างกาย>