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

ข้อความวิ่งไล่เมาส์

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

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

:: How to Build ::
  1. เตรียมข้อความไว้ในเลเยอร์ คุณจะเปลี่ยนเป็นภาพน่ารักๆแทนก็ได้นะครับ <DIV ID="myDiv" STYLE="position:absolute;z-index:100px;"> Hello </DIV>
  2. ตรวจสอบบราวเซอร์ และปรกาศตัวแปร mouseTimer เป็นตัวจับเวลา ns4 = (document.layers)? true:false ie4 = (document.all)? true:false var mouseTimer;
  3. เพื่อให้ฟังก์ชั่นนี้จะถูกเรียกใช้โดยอัตโมัติเมื่อเวบโหลดเสร็จ คุณต้องใส่ onload="init()" ไว้ใน <BODY>มันจะกำหนดให้ฟังก์ชั่น mouseMove() ทำงาน เมื่อเกิดอีเวนต์ onmousemove function init() { document.onmousemove = mouseMove if (ns4) document.captureEvents(Event.MOUSEMOVE) }
  4. ส่วนการทำงานในฟังก์ชั่น mouseMove() ก็จะตรวจสอบตำแหน่งของเมาส์ แล้วไปเรียกฟังก์ชั่น lyrmovestart() เพื่อให้เลเยอร์เริ่มคลานไปที่ตำแหน่งเดียวกับเมาส์ ส่วนการตรวจสอบตำแหน่ง อ่านได้ใน "วิธีตรวจสอบตำแหน่งของ 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 lyrmovestart('myDiv',x+10,y+10); return true }
  5. เมื่อ lyrmovestart() ทำงาน นั่นหมายถึงตำแหน่งของเมาส์มีการเปลี่ยนแปลง ดังนั้นมันต้องเคลียร์ตัวจับเวลา แล้วทำการตั้งเวลาใหม่ ด้วยค่าตำแหน่งใหม่ ซึ่งฟังก์ชั่นที่ใช้ย้าย ตำแหน่งของเลเยอร์คือ lyrmove() function lyrmovestart(obj,posX,posY) { clearInterval(mouseTimer); mouseTimer=setInterval('lyrmove("'+obj+'",'+posX+','+posY+')',10); }
  6. ฟังก์ชั่น lyrmove() เป็นหัวใจของสคริปต์นี้ครับ เห็นโค้ดยาวๆอย่างนี้อย่าเพิ่งกลัวนะครับ ที่จริงมันมี 2 ส่วน สำหรับ IE ส่วนหนึ่ง Netscape ส่วนหนึ่ง ที่ต้องทำ 2 ส่วนเพราะการอ้างถึงพรอเพอร์ตีของแต่ละ เบราเซอร์ไม่เหมือนกันครับ แต่มีหลักการทำงานเหมือนกันทุกประการ สำหรับการทำงานของฟังก์ชั่นนี้ มันจะหาระยะระหว่างตำแหน่งของเคอร์เซอร์ และตำแหน่งของเลเยอร์ แล้วนำระยะนั้นมาหาร 10 ผลลัพธ์ที่ได้ก็จะถูกนำไปบวกกับตำแหน่งเก่าของเลเยอร์ เพื่อคำนวณหาตำแหน่ง ใหม่ของเลเยอร์ การทำเช่นนี้ทำให้เลเยอร์ค่อยๆเคลื่อนที่ไปครับ ในกรณีที่เลเยอร์เลื่อนเข้าใกล้มากๆจนหาร 10 แล้วได้น้อยกว่า 1 ตำแหน่งใหม่จะถูกกำหนดให้เท่ากับตำแหน่งของเคอร์เซอร์เลย function lyrmove(obj,posX,posY) { if (ns4) { diffx=parseInt(window.pageXOffset)- parseInt(document.layers[obj].left)+posX; diffy=parseInt(window.pageYOffset)- parseInt(document.layers[obj].top)+posY; if (isNaN(diffx)) diffx=0; if (isNaN(diffy)) diffy=0; status=diffx+':'+diffy; document.layers[obj].top = parseInt(document.layers[obj].top)+Math.floor(diffy/10); document.layers[obj].left = parseInt(document.layers[obj].left)+Math.floor(diffx/10); if (Math.floor(diffx/10)==0&&diffx>0||diffx==0) document.layers[obj].left = posX; if (Math.floor(diffy/10)==0&&diffy>0||diffy==0) document.layers[obj].top = posY; } if (ie4) { diffx=parseInt(document.body.scrollLeft) -document.all[obj].offsetLeft+posX; diffy=parseInt(document.body.scrollTop) -document.all[obj].offsetTop+posY; if (isNaN(diffx)) diffx=0; if (isNaN(diffy)) diffy=0; document.all[obj].style.top = document.all[obj].offsetTop+Math.floor(diffy/10); document.all[obj].style.left = document.all[obj].offsetLeft+Math.floor(diffx/10); if (Math.floor(diffx/10)==0&&diffx>0) document.all[obj].style.left = posX; if (Math.floor(diffy/10)==0&&diffy>0) document.all[obj].style.top = posY; } }

Back to top





© copyright 2001 Sorrawut Korsuwansiri