สนับสนุนโดย

การใช้ JavaScript ร่วมกับ FrontPage (5)

เอฟเฟ็คท์หิมะตก

เอฟเฟ็คท์นี้เป็นลูกเล่น ที่ใช้ช่วยเพิ่มความน่าสนใจให้กับเว็บเพจ อย่างไรก็ดี ในการใช้งานควรใช้ในเทศกาลที่เหมาะสม และเป็นครั้งคราวเท่านั้น เพราะเอฟเฟ็คท์นี้ จะทำให้การทำงานของบราวเซอร์ช้าลง

ตัวอย่าง

ดูตัวอย่างหิมะตกในเว็บเพจนี้

โค้ด

<SCRIPT LANGUAGE="JavaScript1.2"> <!-- Begin var no = 25; // จำนวนเกล็ดหิมะ var speed = 10; // ความเร็วในการตก ถ้าค่าน้อยจะทำให้หิมะตกเร็วขึ้น var snowflake = "images/snow.gif"; var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 600; if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ns4up) { // set layers if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(snowflake + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(snowflake + "\" border=\"0\"></layer>"); } } else if (ie4up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\""); document.write(snowflake + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\""); document.write(snowflake + "\" border=\"0\"></div>"); } } } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx[i] += stx[i]; document.layers["dot"+i].top = yp[i]; document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()", speed); } function snowIE() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx[i] += stx[i]; document.all["dot"+i].style.pixelTop = yp[i]; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowIE()", speed); } if (ns4up) { snowNS(); } else if (ie4up) { snowIE(); } // End --> </SCRIPT>

วิธีใช้

1. ก๊อปปี้โค้ดข้างต้นไปใส่ใน Notepad

2. แก้ไขค่าตัวแปร snowflake ให้เป็นชื่อไฟล์รูปภาพของคุณเอง (อย่าลืมระบุชื่อไดเร็คทอรีให้ถูกต้องด้วย)

3. ก๊อปปี้โค้ดจาก Notepad ไปแทรกในเว็บเพจ (ตรงไหนก็ได้) โดยทำในแท็บ Normal โดยใช้คำสั่ง Insert Advanced HTML

รูปที่ใช้ไม่จำเป็นต้องเป็นรูปเกล็ดหิมะ แต่จะเป็นอะไรก็ได้ เช่น อาจเป็นรูปหัวใจ สำหรับเทศกาลวาเลนไทน์ โดยควรใช้รูปชนิด gif ที่มีพื้นหลังโปร่งใส หากคุณต้องการนำรูปเกล็ดหิมะ ตามตัวอย่างนี้ไปใช้ ก็คลิกขวาบนรูปข้างล่างนี้ แล้วเลือกคำสั่ง Save Picture As ค่าตัวแปร no (จำนวนรูป) และ speed (ความเร็วในการตก) คุณสามารถแก้ไขได้ตามต้องการ โดยตอนแรกควรใช้ค่าเริ่มต้นที่กำหนดให้ไปก่อน แล้วค่อยปรับแต่งภายหลัง)

ทำภาพเลื่อนแนวนอน

ตัวอย่าง

โค้ด

<SCRIPT LANGUAGE="JavaScript1.2"> <!-- // ความกว้างของช่องแถบเลื่อน (หน่วยเป็นพิกเซล) var sliderwidth=330 // ความสูงของช่องแถบเลื่อน (หน่วยเป็นพิกเซล) var sliderheight=145 // ความเร็วในการเลื่อน (ค่ามากจะเลื่อนเร็ว) var slidespeed=4 // กำหนดชื่อไฟล์และลิงค์ของรูป var leftrightslide=new Array() var finalslide='' leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>' leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>' leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>' leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>' leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></a>' ///////do NOT edit pass this line//////////////////////////////////// var copyspeed=slidespeed //copy contents of leftrightslide into one variable for (i=0;i<leftrightslide.length;i++) finalslide=finalslide+leftrightslide[i]+"  " if (document.all){ //dynamically write out the marquee tag document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>') //stop marquee when mouse is over it ieslider.onmouseover=new Function("ieslider.scrollAmount=0") //re-enable marquee when mouse is out ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed") } function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers){ document.ns_slider01.visibility="show" setTimeout("window.onresize=regenerate",450) intializeleftrightslide() } if (document.all) ieslider.scrollAmount=slidespeed } //NS specific function for initializing slider upon page load function intializeleftrightslide(){ document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>') document. ns_slider01.document.ns_slider02.document.close() thelength=document.ns_slider01.document.ns_slider02.document.width scrollslide() } //NS specific function for sliding slideshow function scrollslide(){ if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){ document.ns_slider01.document.ns_slider02.left-=slidespeed setTimeout("scrollslide()",100) } else{ document.ns_slider01.document.ns_slider02.left=sliderwidth scrollslide() } } window.onload=regenerate2 //--> </SCRIPT> <ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide> <layer name="ns_slider02" onMouseover="slidespeed=0;" onMouseout="slidespeed=copyspeed"></layer> </ilayer>

วิธีใช้

1. ก๊อปปี้โค้ดข้างต้นไปใส่ใน Notepad

2. แก้ไขค่าตัวแปรเพื่อปรับแต่งการทำงาน โดย

sliderwidth    ใช้ระบุความกว้างของบริเวณที่จะให้รูปเลื่อน หน่วยเป็นพิกเซล

sliderheight  ใช้ระบุความสูงของบริเวณที่จะให้รูปเลื่อน

slidespeed    ระบุความเร็วในการเลื่อน โดยค่ายิ่งมากยิ่งเร็ว

3. แก้ไขค่าตัวแปร leftrightslide[0] เพื่อกำหนดชื่อไฟล์ และไฮเปอร์ลิงค์ของรูปที่จะแสดง เช่น ถ้าไฟล์รูปชื่อ images/flash.jpg และลิงค์ไปที่ http://www.provision.co.th/book_detail/flash.htm ดังนั้นจากโค้ดเดิม

'<a href="http://"><img src="dynamicbook1.gif" border=1></a>'

ต้องแก้ไขเป็น

'<a href="http://www.provision.co.th/book_detail/
flash.htm"><img src="images/flash.jpg" border=1></a>'

และถ้าหากไม่ต้องการให้รูปมีกรอบ ก็ให้แก้ border=1 เป็น border=0 ด้วย

4. แก้ไขค่า leftrightslide[ ] ตัวที่ 1, 2, 3 และ 4 ให้เป็นลิงค์ และแอดเดรสของรูปอื่นๆ อีกตามต้องการ ถ้าไม่เพียงพอ ก็สามารถเพิ่มค่าที่ 5, 6, ... ไปได้เรื่อยๆ หรือถ้ามากเกินไป ก็ลบตัวแปรส่วนที่เกินออกได้ (ลบทั้งบรรทัด)

5. ก๊อปปี้โค้ดจาก Notepad ไปแทรกในเว็บเพจ ตรงตำแหน่งที่จะแสดงเอฟเฟ็คท์  โดยทำในแท็บ Normal โดยใช้คำสั่ง Insert Advanced HTML

Copyright © 2000-2003, Creative Ideas.  All rights reserved.
Webmaster : webmaster@provision.co.th