:: How to Build ::
- เตรียมข้อความไว้ในเลเยอร์ คุณจะเปลี่ยนเป็นภาพน่ารักๆแทนก็ได้นะครับ
<![CDATA[
<DIV ID="myDiv" STYLE="position:absolute;z-index:100px;">
Hello
</DIV>
]]>
- ตรวจสอบบราวเซอร์ และปรกาศตัวแปร mouseTimer เป็นตัวจับเวลา
<![CDATA[
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
var mouseTimer;
]]>
- เพื่อให้ฟังก์ชั่นนี้จะถูกเรียกใช้โดยอัตโมัติเมื่อเวบโหลดเสร็จ คุณต้องใส่ onload="init()" ไว้ใน <BODY>มันจะกำหนดให้ฟังก์ชั่น mouseMove() ทำงาน
เมื่อเกิดอีเวนต์ onmousemove
<![CDATA[
function init() {
document.onmousemove = mouseMove
if (ns4) document.captureEvents(Event.MOUSEMOVE)
}
]]>
- ส่วนการทำงานในฟังก์ชั่น mouseMove() ก็จะตรวจสอบตำแหน่งของเมาส์ แล้วไปเรียกฟังก์ชั่น lyrmovestart()
เพื่อให้เลเยอร์เริ่มคลานไปที่ตำแหน่งเดียวกับเมาส์
ส่วนการตรวจสอบตำแหน่ง อ่านได้ใน
"วิธีตรวจสอบตำแหน่งของ mouse ใน JavaScript"
<![CDATA[
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
}
]]>
- เมื่อ lyrmovestart() ทำงาน นั่นหมายถึงตำแหน่งของเมาส์มีการเปลี่ยนแปลง
ดังนั้นมันต้องเคลียร์ตัวจับเวลา แล้วทำการตั้งเวลาใหม่ ด้วยค่าตำแหน่งใหม่ ซึ่งฟังก์ชั่นที่ใช้ย้าย
ตำแหน่งของเลเยอร์คือ lyrmove()
<![CDATA[
function lyrmovestart(obj,posX,posY) {
clearInterval(mouseTimer);
mouseTimer=setInterval('lyrmove("'+obj+'",'+posX+','+posY+')',10);
}
]]>
- ฟังก์ชั่น lyrmove() เป็นหัวใจของสคริปต์นี้ครับ เห็นโค้ดยาวๆอย่างนี้อย่าเพิ่งกลัวนะครับ
ที่จริงมันมี 2 ส่วน สำหรับ IE ส่วนหนึ่ง Netscape ส่วนหนึ่ง ที่ต้องทำ 2 ส่วนเพราะการอ้างถึงพรอเพอร์ตีของแต่ละ
เบราเซอร์ไม่เหมือนกันครับ แต่มีหลักการทำงานเหมือนกันทุกประการ สำหรับการทำงานของฟังก์ชั่นนี้ มันจะหาระยะระหว่างตำแหน่งของเคอร์เซอร์ และตำแหน่งของเลเยอร์ แล้วนำระยะนั้นมาหาร 10 ผลลัพธ์ที่ได้ก็จะถูกนำไปบวกกับตำแหน่งเก่าของเลเยอร์ เพื่อคำนวณหาตำแหน่ง
ใหม่ของเลเยอร์ การทำเช่นนี้ทำให้เลเยอร์ค่อยๆเคลื่อนที่ไปครับ ในกรณีที่เลเยอร์เลื่อนเข้าใกล้มากๆจนหาร 10 แล้วได้น้อยกว่า 1 ตำแหน่งใหม่จะถูกกำหนดให้เท่ากับตำแหน่งของเคอร์เซอร์เลย
<![CDATA[
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;
}
}
]]>
|
