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

หิมะตกในหน้าจอ

สคริปต์นี้ แสดงหิมะตก โดยสามารถกำหนดจำนวนของหิมะได้ด้วยครับ

#
#
#
#
#
#
#
#
#
#

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

:: How to Build ::
  1. ก่อนอื่น เราต้องกำหนดจำนวนของหิมะ และประกาศอาเรย์เพื่อเก็บ "มุม" สำหรับใช้ในฟังก์ชั่น sin ซึ่งผมจะอธิบายภายหลังครับ ว่าจะใช้ฟังก์ชั่นนี้ทำอะไร angel = new Array(); lyrnum=20; </DIV>
  2. การวางเลเยอร์ มีโค้ดแบบนี้ครับ (ใส่ในส่วน BODY) เราต้องใส่เลเยอร์เท่าจำนวนของหิมะที่ต้องการ ลงไป ซึ่งเลเยอร์เหล่านี้จะมี id เป็น "layer" ตามด้วยหมายเลข หลังจากนั้นก็จะสุ่มตำแหน่งเริ่มต้น และมุมของแต่ละเลเยอร์ไปเก็บไว้ในอาเรย์ angel คุณจะปรับปรุงโดยใส่ภาพหรืออะไรลงไป ก็ทำได้โดยการใส่แทนเครื่องหมาย # สิ่งสำคัญก็คือ คุณต้องรู้ขนาดความกว้างและความสูงของ ภาพนั้น จะได้กำหนดขนาดของเลเยอร์ได้พอดีกับภาพครับ <DIV ID="layer0" STYLE=" position:absolute; left:653px;top:0px; width:15px; height:15px; clip:rect(0px 15px 15px 0px);">#</DIV> ..... ..... ..... <DIV ID="layerXX" STYLE=" position:absolute; left:89px;top:0px; width:15px; height:15px; clip:rect(0px 15px 15px 0px);">#</DIV> if (ie4) { for (var i=0;i<lyrnum;i++) { angel[i]=Math.floor(Math.random()*20); document.all['layer'+i].style.top= Math.floor(Math.random()*window.document.body.offsetHeight-15); } } if (ns4) { for (var i=0;i<lyrnum;i++) { angel[i]=Math.floor(Math.random()*20); lyrtext="layer"+i; window.document.layers["layer"+i].top= Math.floor(Math.random()*window.innerHeight-15); } }
  3. ในส่วนสคริปต์ (ใน <HEAD>) จะต้องมีการตรวจสอบเบราเซอร์ก่อน เพราะแต่ละบราวเซอร์มีวิธีเขียนไม่เหมือนกัน ns4 = (document.layers)? true:false ie4 = (document.all)? true:false
  4. ประกาศฟังก์ชั่น moveBy() เอาไว้เลื่อนเลเยอร์ครับ 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].offsetLeft)+x; document.all[obj].style.top = parseInt(document.all[obj].offsetTop)+y; } }
  5. ส่วนการทำงานหลัก จะมี 2 ฟังก์ชั่นครับ lyrmove() จะเคลื่อนย้ายเลเยอร์เดียว โดยคำนวนตำแหน่งจากฟังก์ชั่น Math.sin() ส่วน alllyrmove() จะไปสั่ง lyrmove() ให้ทำงานเป็นลูปเพื่อเคลื่อนย้ายเลเยอร์ทั้งหมด function lyrmove(obj,angindex) { if (document.all[obj].offsetTop+document.all[obj].offsetHeight +25<window.document.body.offsetHeight+document.body.scrollTop) { angel[angindex]+=1; moveBy(obj,Math.sin(angel[angindex]/10)*2,1); } else { document.all[obj].style.top=document.body.scrollTop; angel[angindex]=Math.floor(Math.random()*20); document.all[obj].style.left=Math.floor(Math.random()* (window.document.body.offsetWidth-10)) } } function alllyrmove() { for (var i=0;i<lyrnum;i++) { lyrmove('layer'+i,i); } }
  6. ส่วนนี้เป็นฟังก์ชั่นที่สั่งให้สคริปต์เริ่มทำงาน มันจะกำหนดตำแหน่งเริ่มต้นให้กับเลเยอร์ แล้วเรียก lyrmove() ให้ทำงานทุกๆ 0.05 วินาที function start() { Timer=setInterval("alllyrmove()",50); }

Back to top





© copyright 2001 Sorrawut Korsuwansiri