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

เลเยอร์ลอยตาม Scroll Bars แบบที่ 1

สคริปต์นี้ ทำให้เลเยอร์ลอยตามการเลื่อน Scrollbars ของผู้ใช้ครับ

 

 

 

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

:: How to Build ::
  1. การวางเลเยอร์ มีโค้ดแบบนี้ครับ ถ้าคุณจะปรับปรุงโดยการใส่ภาพหรืออะไรลงไป ก็ทำได้โดยการใส่ในช่วง <DIV>...</DIV> สิ่งสำคัญก็คือ คุณต้องรู้ขนาดความกว้างและความสูงของ ภาพนั้น จะได้กำหนดขนาดของเลเยอร์ได้พอดีกับภาพครับ <DIV ID="layer1" STYLE="position:absolute; width:30px; height:30px; clip:rect(0px 30px 30px 0px); background-color:red; layer-background-color:red; "> </DIV>
  2. ในส่วนสคริปต์ (ใน <HEAD>) จะต้องมีการตรวจสอบเบราเซอร์ก่อน เพราะแต่ละบราวเซอร์มีวิธีเขียนไม่เหมือนกัน ns4 = (document.layers)? true:false ie4 = (document.all)? true:false
  3. ส่วนการทำงานในฟังก์ชั่นหลัก ก็มีหลักการง่ายๆครับ แค่เอาค่าการ Scroll (window.pageYOffset,window.pageXOffset ใน NS และ document.body.scrollTop,document.body.scrollLeft ใน IE) มาบวกกับตำแหน่งในหน้าจอ (posX,posY) แล้วไปกำหนดเป็นตำแหน่งของเลเยอร์เท่านั้นเอง 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; } }
  4. ส่วนนี้เป็นฟังก์ชั่นที่สั่งให้สคริปต์เริ่มทำงาน มันจะกำหนดตำแหน่งเริ่มต้นให้กับเลเยอร์ แล้วเรียก lyrmove() ให้ทำงานทุกๆ 0.01 วินาที 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); }

Back to top





© copyright 2001 Sorrawut Korsuwansiri