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

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

สคริปต์นี้ ทำให้เลเยอร์ลอยตามการเลื่อน 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 เพื่อคำนวนหาระยะห่างระหว่าง ตำแหน่งปัจจุบัน กับตำแหน่งที่ต้องการจะไป และในส่วนของการกำหนดตำแหน่งใหม่ ก็จะนำระยะห่างนี้มา หาร 10 แล้วบวกกับ ตำแหน่งปัจจุบัน ทำให้เลเยอร์ค่อยๆเลื่อนไปจนถึงตำแหน่งใหม่ครับ ส่วน document.all[obj].offsetTop และ document.all[obj].offsetTop มีความหมายเหมือนกับ document.all[obj].style.top และ document.all[obj].style.left คือเป็นตำแหน่งของ เลเยอร์แต่ไม่ต้องใช้กับ style ครับ 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); } }
  4. ส่วนนี้เป็นฟังก์ชั่นที่สั่งให้สคริปต์เริ่มทำงาน มันจะกำหนดตำแหน่งเริ่มต้นให้กับเลเยอร์ แล้วเรียก lyrmove() ให้ทำงานทุกๆ 0.02 วินาที 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); }

Back to top





© copyright 2001 Sorrawut Korsuwansiri