:: 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 (window.pageYOffset,window.pageXOffset ใน NS และ document.body.scrollTop,document.body.scrollLeft ใน IE) มาบวกกับตำแหน่งในหน้าจอ (posX,posY)
แล้วไปกำหนดเป็นตำแหน่งของเลเยอร์เท่านั้นเอง
<![CDATA[
function lyrmove(obj) {
if (ns4) {
document.layers[obj].top =
parseInt(window.pageYOffset)+posY;
document.layers['layer1'].left =
parseInt(window.pageXOffset)+posX;
}
if (ie4) {
document.all[obj].style.top =
parseInt(document.body.scrollTop)+posY;
document.all['layer1'].style.left =
parseInt(document.body.scrollLeft)+posX;
}
}
]]>
- ส่วนนี้เป็นฟังก์ชั่นที่สั่งให้สคริปต์เริ่มทำงาน มันจะกำหนดตำแหน่งเริ่มต้นให้กับเลเยอร์
แล้วเรียก lyrmove() ให้ทำงานทุกๆ 0.01 วินาที
<![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')",10);
}
]]>
|
