:: How to Build ::
- ก่อนอื่น เราต้องกำหนดจำนวนของหิมะ และประกาศอาเรย์เพื่อเก็บ "มุม" สำหรับใช้ในฟังก์ชั่น sin ซึ่งผมจะอธิบายภายหลังครับ ว่าจะใช้ฟังก์ชั่นนี้ทำอะไร
<![CDATA[
angel = new Array();
lyrnum=20;
</DIV>
]]>
- การวางเลเยอร์ มีโค้ดแบบนี้ครับ (ใส่ในส่วน BODY) เราต้องใส่เลเยอร์เท่าจำนวนของหิมะที่ต้องการ
ลงไป ซึ่งเลเยอร์เหล่านี้จะมี id เป็น "layer" ตามด้วยหมายเลข
หลังจากนั้นก็จะสุ่มตำแหน่งเริ่มต้น และมุมของแต่ละเลเยอร์ไปเก็บไว้ในอาเรย์ angel
คุณจะปรับปรุงโดยใส่ภาพหรืออะไรลงไป
ก็ทำได้โดยการใส่แทนเครื่องหมาย #
สิ่งสำคัญก็คือ คุณต้องรู้ขนาดความกว้างและความสูงของ
ภาพนั้น จะได้กำหนดขนาดของเลเยอร์ได้พอดีกับภาพครับ
<![CDATA[
<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);
}
}
]]>
- ในส่วนสคริปต์ (ใน <HEAD>) จะต้องมีการตรวจสอบเบราเซอร์ก่อน เพราะแต่ละบราวเซอร์มีวิธีเขียนไม่เหมือนกัน
<![CDATA[
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
]]>
- ประกาศฟังก์ชั่น moveBy() เอาไว้เลื่อนเลเยอร์ครับ
<![CDATA[
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;
}
}
]]>
- ส่วนการทำงานหลัก จะมี 2 ฟังก์ชั่นครับ lyrmove() จะเคลื่อนย้ายเลเยอร์เดียว
โดยคำนวนตำแหน่งจากฟังก์ชั่น Math.sin() ส่วน alllyrmove() จะไปสั่ง lyrmove()
ให้ทำงานเป็นลูปเพื่อเคลื่อนย้ายเลเยอร์ทั้งหมด
<![CDATA[
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);
}
}
]]>
- ส่วนนี้เป็นฟังก์ชั่นที่สั่งให้สคริปต์เริ่มทำงาน มันจะกำหนดตำแหน่งเริ่มต้นให้กับเลเยอร์
แล้วเรียก lyrmove() ให้ทำงานทุกๆ 0.05 วินาที
<![CDATA[
function start()
{
Timer=setInterval("alllyrmove()",50);
}
]]>
|
