:: How to Build ::
- เตรียมเลเยอร์ 2 เลเยอร์ไว้เป็นเส้นแนวตั้งและแนวนอน และกำหนดขนาดเป็น 1x1 ไปก่อน
<![CDATA[
<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>
]]>
- ตรวจสอบบราวเซอร์
<![CDATA[
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
]]>
- ประกาศฟังก์ชั่น moveTo() และ clipTo() ไว้ใช้ ท่านสามารถศึกษารายละเอียดของฟังก์ชั่นนี้
ได้ในบทความ เรื่อง "เขียนฟังก์ชั่น moveTo() และ moveBy()" และ "การคลิปเลเยอร์"
<![CDATA[
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)"
}
}
}
]]>
- เพื่อให้ฟังก์ชั่นนี้จะถูกเรียกใช้โดยอัตโมัติเมื่อเวบโหลดเสร็จ คุณต้องใส่ onload="init()" ไว้ใน <BODY>มันจะกำหนดขนาดที่ถูกต้องให้กับเลเยอร์ทั้งสอง
และตั้งให้ฟังก์ชั่น mouseMove() ทำงานเมื่อเกิดอีเวนต์ onmousemove และกำหนดให้เรียกฟังก์ชั่น
ฟังก์ชั่นนี้ทุกครั้งที่มีการปรับขนาด windows
<![CDATA[
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)
}
]]>
- ส่วนการทำงานในฟังก์ชั่น mouseMove() ก็แค่ย้ายเลเยอร์ไปที่ตำแหน่งเดียวกับ mouse เท่านั้น
ซึ่งการอ่านตำแหน่งมีรายละเอียดอยู่ในบทความ
"วิธีตรวจสอบตำแหน่งของ 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
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
}
]]>
|
