Freecode
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 

ข้อความติดเมาส์

สคริปต์นี้ ทำให้มีข้อความติดอยู่กับเมาส์ เลื่อนเมาส์ไปไหน ข้อความก็จะเลื่อนตามไป
Hello

ความรู้ที่ใช้ใน Script นี้

:: How to Build ::
  1. เตรียมข้อความไว้ในเลเยอร์ คุณจะเปลี่ยนเป็นภาพน่ารักๆแทนก็ได้นะครับ <DIV ID="myDiv" STYLE="position:absolute;z-index:100px;"> Hello </DIV>
  2. ตรวจสอบบราวเซอร์ ns4 = (document.layers)? true:false ie4 = (document.all)? true:false
  3. เพื่อให้ฟังก์ชั่นนี้จะถูกเรียกใช้โดยอัตโมัติเมื่อเวบโหลดเสร็จ คุณต้องใส่ onload="init()" ไว้ใน <BODY>มันจะกำหนดให้ฟังก์ชั่น mouseMove() ทำงาน เมื่อเกิดอีเวนต์ onmousemove function init() { document.onmousemove = mouseMove if (ns4) document.captureEvents(Event.MOUSEMOVE) }
  4. ส่วนการทำงานในฟังก์ชั่น mouseMove() ก็แค่ย้ายเลเยอร์ไปที่ตำแหน่งเดียวกับ mouse เท่านั้น ซึ่งการอ่านตำแหน่งมีรายละเอียดอยู่ในบทความ "วิธีตรวจสอบตำแหน่งของ mouse ใน JavaScript" function mouseMove(e) { var x = (ns4)? e.pageX : event.x+document.body.scrollLeft var y = (ns4)? e.pageY : event.y+document.body.scrollTop moveTo('myDiv',x+10,y+10); return true }
  5. ส่วนฟังก์ชั่น moveTo() เป็นฟังก์ชั่นที่ใช้เคลื่อนย้ายเลเยอร์ไปยังตำแหน่งที่กำหนด มีรายละเอียดดังนี้ function moveTo(obj,x,y) { if (ns4) { document.layers[obj].left = x; document.layers[obj].top = y; } if (ie4) { document.all[obj].style.left = x; document.all[obj].style.top = y; }

Back to top





© copyright 2001 Sorrawut Korsuwansiri