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

กรอบแสดงข้อความเรืองแสง

          สคริปต์นี้แสดงกรอบข้อความเรืองแสง โดยข้อความจะเปลี่ยนไปเรื่อยๆ

RealDev.Net
แหล่งข้อมูลสำหรับเวบมาสเตอร์ตัวจริงเช่นคุณ

:: How to Build ::
  1. ก่อนอื่น เรามาดูหลักการทำงานคร่าวๆ ของสคริปต์นี้กันก่อน
    สคริปต์นี้ใช้คุณสมบัติของ filter ใน Cascadind Style Sheet (ฉบับไมโครซอฟต์) เป็นตัวทำให้อักษรเรืองแสงขึ้นมา โดยกำหนดคลาสไว้ 3 คลาสคือ F1 F2 และ F3 แล้วสลับคลาสไปเรื่อยๆด้วย JavaScript

    ข้างล่างนี้เป็นส่วนที่ใช้กำหนดคลาสทั้ง 3 เอาไปแปะไว้ในส่วน <Head> ได้เลย

    <style type="text/css"> .F1 {filter: glow(Color=#FF8000,Strength=10); width=200px; height=200px;} .F2 {filter: glow(Color=#00FF00,Strength=9); width=200px; height=200px;} .F3 {filter: glow(Color=#0080FF,Strength=12); width=200px; height=200px;} </style>
  2. ต่อมาเป็นฟังก์ชั่นที่ใช้สลับสับเปลี่ยน Style ทั้ง 3 โดยใช้ตัวแปร i เป็นตัวเลือก Style ในตอนท้ายของฟังก์ชั่นมีการเรียกตัวเองขึ้นมาทำงานในรอบต่อไป

    <SCRIPT LANGUAGE="JavaScript"> var rate = 1000 // do not edit below this line var i = 0; var F = 'F1'; function doThing() { if (document.getElementById&&document.all) { i++; if (i==1) F = 'F1'; if (i==2) F = 'F2'; if (i==3) F = 'F3'; Glowtext.className = F; if (i > 2) i = 0; timer = setTimeout('doThing()', rate); } } // End --> </script>
  3. และสุดท้าย ก็ใส่ช่องแสดงข้อความลงไป โดยกำหนด id ให้ตรงกับในสคริปต์ แล้วอย่าลืมไปเรียกฟังก์ชั่น doThing() (จากข้อ 2)มาทำงานในรอบแรกด้วยล่ะ

    <BODY onload="doThing()"> ... ... ... ... <p id="Glowtext"> <b>RealDev.Net <br> แหล่งข้อมูลสำหรับเวบมาสเตอร์ตัวจริงเช่นคุณ</b> </p>

Back top top





© copyright 2001 Sorrawut Korsuwansiri