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

เส้นแนวนอนและแนวตั้งตามเมาส์

สคริปต์นี้ ทำให้มีเส้นแนวนอนและแนวตั้ง ตัดกันในตำแหน่งที่เมาส์ชี้อยู่

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

:: How to Build ::
  1. เตรียมเลเยอร์ 2 เลเยอร์ไว้เป็นเส้นแนวตั้งและแนวนอน และกำหนดขนาดเป็น 1x1 ไปก่อน <DIV ID="lineX" STYLE="position:absolute;z-index:100px; width:1px; height:1px; background-color:black; layer-background-color:black; "></DIV> <DIV ID="lineY" STYLE="position:absolute;z-index:100px; width:1px; height:1px; background-color:black; layer-background-color:black; "></DIV>
  2. ตรวจสอบบราวเซอร์ ns4 = (document.layers)? true:false ie4 = (document.all)? true:false
  3. ประกาศฟังก์ชั่น moveTo() และ clipTo() ไว้ใช้ ท่านสามารถศึกษารายละเอียดของฟังก์ชั่นนี้ ได้ในบทความ เรื่อง "เขียนฟังก์ชั่น moveTo() และ moveBy()" และ "การคลิปเลเยอร์" 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; } } function clipTo(obj,t,r,b,l) { if (ns4) { if (!obj.left) {obj=document.layers[obj]} obj.clip.top = t obj.clip.right = r obj.clip.bottom = b obj.clip.left = l } else { if (ie4) { if (!obj.left) {obj=document.all[obj].style} obj.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)" } } }
  4. เพื่อให้ฟังก์ชั่นนี้จะถูกเรียกใช้โดยอัตโมัติเมื่อเวบโหลดเสร็จ คุณต้องใส่ onload="init()" ไว้ใน <BODY>มันจะกำหนดขนาดที่ถูกต้องให้กับเลเยอร์ทั้งสอง และตั้งให้ฟังก์ชั่น mouseMove() ทำงานเมื่อเกิดอีเวนต์ onmousemove และกำหนดให้เรียกฟังก์ชั่น ฟังก์ชั่นนี้ทุกครั้งที่มีการปรับขนาด windows function init() { if (ns4) { document.layers['lineX'].width = window.innerWidth-25; document.layers['lineY'].height = window.innerHeight-25; clipTo('lineX',0,window.innerWidth-25,1,0); clipTo('lineY',0,1,window.innerHeight-25,0); } if (ie4) { document.all['lineX'].style.width = document.body.offsetWidth-25; document.all['lineY'].style.height = document.body.offsetHeight-5; clipTo('lineX',0,document.body.offsetWidth-25,1,0); clipTo('lineY',0,1,document.body.offsetHeight-5,0); } document.onmousemove = mouseMove window.onresize=init if (ns4) document.captureEvents(Event.MOUSEMOVE) if (ns4) window.captureEvents(Event.RESIZE) }
  5. ส่วนการทำงานในฟังก์ชั่น 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 if (ns4) { moveTo('lineX',window.pageXOffset,y); moveTo('lineY',x,window.pageYOffset); } if (ie4) { moveTo('lineX',document.body.scrollLeft,y); moveTo('lineY',x,document.body.scrollTop); } return true }

Back to top





© copyright 2001 Sorrawut Korsuwansiri