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

ลอยไปลอยมาในหน้าจอ

สคริปต์นี้ ทำให้เลเยอร์ลอยไปมาในหน้าจอครับ เวลาเอาไปใช้จะเปลี่ยนเป็นรูปก็ได้

 

 

 

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

:: How to Build ::
  1. การวางเลเยอร์ มีโค้ดแบบนี้ครับ ถ้าคุณจะปรับปรุงโดยการใส่ภาพหรืออะไรลงไป ก็ทำได้โดยการใส่ในช่วง <DIV>...</DIV> สิ่งสำคัญก็คือ คุณต้องรู้ขนาดความกว้างและความสูงของ ภาพนั้น จะได้กำหนดขนาดของเลเยอร์ได้พอดีกับภาพครับ <DIV ID="layer1" STYLE="position:absolute; left:50px; top:100px; 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. ประกาศฟังก์ชั่น moveBy() เอาไว้เลื่อนเลเยอร์ ผมประกาศแบบรับ obj เป็นชื่อเลเยอร์ครับ function moveBy(obj,x,y) { if (ns4) { document.layers[obj].left = parseInt(document.layers[obj].left)+x; document.layers[obj].top = parseInt(document.layers[obj].top)+y; } if (ie4) { document.all[obj].style.left = parseInt(document.all[obj].style.left)+x; document.all[obj].style.top = parseInt(document.all[obj].style.top)+y; } }
  4. ส่วนการทำงานในฟังก์ชั่นหลัก จะมี 2 ฟังก์ชั่นคือ Checkpos() มีหน้าที่ตรวจสอบตำแหน่งว่า ขณะนี้เลเยอร์ชนขอบหรือยัง ถ้าชน ให้กำหนดทิศทางใหม่ไปทางตรงกันข้าม ส่วน window.innerWidthและ window.innerHeightเป็นพรอเพอร์ตีที่ใช้ตรวจสอบขนาดของพื้นที่ใช้งานในหน้าจอ สำหรับผู้ใช้ Netscape ส่วนใน Internet Explorer จะใช้ window.document.body.offsetWidth และ window.document.body.offsetHeight ส่วนฟังก์ชั่น moveit() จะไปเรียกฟังก์ชั่น Checkpos() เพื่อกำหนดทิศทางก่อน แล้วค่อยไปเรียก moveBy() เพื่อเคลื่อนย้ายเลเยอร์ function Checkpos(obj) { if (ns4) { var maxX=window.innerWidth-parseInt(document.layers[obj].clip.width); var maxY=window.innerHeight-parseInt(document.layers[obj].clip.height); if (parseInt(document.layers[obj].left)<=0) {Xmove*=-1;} if (parseInt(document.layers[obj].left)>=maxX) {Xmove*=-1;} if (parseInt(document.layers[obj].top)<=0) {Ymove*=-1;} if (parseInt(document.layers[obj].top)>=maxY) {Ymove*=-1;} } if (ie4) { var maxX=window.document.body.offsetWidth-25-parseInt(document .all[obj].style.width); var maxY=window.document.body.offsetHeight-8-parseInt(document .all[obj].style.height); if (parseInt(document.all[obj].style.left)<=0) {Xmove*=-1;} if (parseInt(document.all[obj].style.left)>=maxX) {Xmove*=-1;} if (parseInt(document.all[obj].style.top)<=0) {Ymove*=-1;} if (parseInt(document.all[obj].style.top)>=maxY) {Ymove*=-1;} } } function moveit(obj) { Checkpos(obj); moveBy(obj,Xmove,Ymove); }
  5. ส่วนนี้เป็นฟังก์ชั่นที่สั่งให้สคริปต์เริ่มทำงาน มันจะกำหนดทิศทางให้เคลื่อนไปทางขวาบนก่อน แล้วจึงสั่งให้ moveit() ทำงานทุกๆ 0.1 วินาที function start() { Xmove=1; Ymove=-1; Timer=setInterval("moveit('layer1')",10); }

Back to top





© copyright 2001 Sorrawut Korsuwansiri