:: How to Build ::
- การวางเลเยอร์ มีโค้ดแบบนี้ครับ ถ้าคุณจะปรับปรุงโดยการใส่ภาพหรืออะไรลงไป
ก็ทำได้โดยการใส่ในช่วง <DIV>...</DIV>
สิ่งสำคัญก็คือ คุณต้องรู้ขนาดความกว้างและความสูงของ
ภาพนั้น จะได้กำหนดขนาดของเลเยอร์ได้พอดีกับภาพครับ
<![CDATA[
<DIV ID="layer1" STYLE="position:absolute;
width:30px; height:30px;
clip:rect(0px 30px 30px 0px);
background-color:red;
layer-background-color:red;
">
</DIV>
]]>
- ในส่วนสคริปต์ (ใน <HEAD>) จะต้องมีการตรวจสอบเบราเซอร์ก่อน เพราะแต่ละบราวเซอร์มีวิธีเขียนไม่เหมือนกัน
<![CDATA[
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
]]>
- ส่วนการทำงานในฟังก์ชั่นหลัก ก็มีหลักการง่ายๆครับ
คือหาระยะห่างระหว่างตำแหน่งปัจจุบัน และตำแหน่งของการ Scroll เพื่อคำนวนหาระยะห่างระหว่าง
ตำแหน่งปัจจุบัน กับตำแหน่งที่ต้องการจะไป และในส่วนของการกำหนดตำแหน่งใหม่ ก็จะนำระยะห่างนี้มา
หาร 10 แล้วบวกกับ ตำแหน่งปัจจุบัน ทำให้เลเยอร์ค่อยๆเลื่อนไปจนถึงตำแหน่งใหม่ครับ ส่วน
document.all[obj].offsetTop และ document.all[obj].offsetTop มีความหมายเหมือนกับ
document.all[obj].style.top และ document.all[obj].style.left คือเป็นตำแหน่งของ เลเยอร์แต่ไม่ต้องใช้กับ style ครับ
<![CDATA[
function lyrmove(obj) {
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;
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 (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);
}
}
]]>
- ส่วนนี้เป็นฟังก์ชั่นที่สั่งให้สคริปต์เริ่มทำงาน มันจะกำหนดตำแหน่งเริ่มต้นให้กับเลเยอร์
แล้วเรียก lyrmove() ให้ทำงานทุกๆ 0.02 วินาที
<![CDATA[
function start()
{
if (ns4) {
posX=window.innerWidth-
parseInt(document.layers['layer1'].clip.width)-50;
posY=window.innerHeight-
parseInt(document.layers['layer1'].clip.height)-50;
}
if (ie4) {
posX=window.document.body.offsetWidth-
50-parseInt(document.all['layer1'].style.width);
posY=window.document.body.offsetHeight-
50-parseInt(document.all['layer1'].style.height);
}
Timer=setInterval("lyrmove('layer1')",20);
}
]]>
|
