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

หน้าจอเลื่อนลงเอง

          สคริปต์นี้เลื่อนหน้าจอลงเอง โดยที่เราไม่ต้องกดเลื่อนที่ Scroll Bar เมื่อสุดหน้าจอแล้วจะหยุดการทำงาน

:: How to Build ::
  1. หลักการคร่าวๆ นะครับ เดี๋ยวตอนท้ายจะมี Full Code ให้
    ฟังก์ชั่นหลักที่ใช้ในการ Scroll คือ window.scroll(0,currentpos) ตัวแปร currentpos นั้นเป็นตำแหน่งที่เราต้องการให้มันเลื่อนไป การเพิ่มค่าในตัวแปรนี้ทีละนิดแล้วเรียกฟังก์ชั่น window.scroll(0,currentpos) นี้ใหม่จะทำให้มันค่อยๆเลื่อนลง
    window.scroll(0,currentpos)
  2. แต่อุปสรรคของ Script นี้มีอยู่ 2 ประการคือ
    1. พรอเพอร์ตีที่เก็บตำแหน่งของการ Scroll window ของ Internet Explorer และ Netscape ไม่เหมือนกัน
    2. ไม่มี พรอเพอร์ตี ที่เก็บความสูงของเอกสารทำให้ไม่รู้จุดสิ้นสุดของการ Scroll
  3. แก้ไขอุปสรรคประการแรก - ใช้ if (document.all) ตรวจสอบ Browser แล้วค่อยดึงค่าจาก พรอเพอร์ตีที่เหมาะสม if (document.all) currentpos=document.body.scrollTop+speed else currentpos=window.pageYOffset+speed window.scroll(0,currentpos) }
  4. แก้ไขอุปสรรคประการที่สอง - ใช้วิธีเก็บค่าตำแหน่งเก่าเอาไว้ แล้วรอให้ Scroll ไปอีก 1 Step ค่อยเอาค่านี้มาเปรียบเทียบกับค่าปัจจุบัน ถ้าค่า 2 ค่านี้เท่ากันเมื่อไหร่ แสดงว่า Scroll มาจนถึงล่างสุดแล้วไม่สามารถเลื่อนต่อไปได้ if (curpos1!=curpos2){ if (document.all) currentpos=document.body.scrollTop+speed else currentpos=window.pageYOffset+speed window.scroll(0,currentpos) } else{ clearInterval(Tm); } }
  5. ดังนั้นเราจะต้องเก็บค่าตำแหน่งไว้ในตัวแปร 2 ตัว (ตำแหน่งเก่า และ ตำแหน่งปัจจุบัน) เพื่อการเปรียบเทียบดังกล่าว โดยสลับกันเก็บรอบละตัว เช่น รอบแรกเก็บไว้ใน curpos1 รอบที่ 2 curpos2 รอบที่ 3 curpos1 สลับกันเช่นนี้ไปเรื่อยๆ เมื่อเราเอา curpos1 และ curpos2 มาเปรียบเทียบกัน ก็จะรู้ได้ทันทีว่า รอบที่ผ่านมา Scroll ได้หรือไม่ และการสลับตัวแปรเช่นนี้ จำเป็นต้องใช้เทคนิกเล็กๆน้อยๆมาช่วย โปรดสังเกต ตัวแปร alt ตัวแปรนี้ ถูกเปลียนค่า ทุกครั้งที่ฟังก์ชั่นทำงาน แต่จะวนอยู่แค่ 0 กับ 1 เท่านั้น จากนั้นค่อยใช้ตัวแปร alt ไปเลือกว่าจะเก็บค่าตำแหน่งปัจจุบัน ใส่ตัวแปรไหน (และแน่นอนครับ ตัวแปรอีกตัวก็เป็นค่าตำแหน่งของรอบที่แล้วนั่นเอง) if (document.all) temp=document.body.scrollTop else temp=window.pageYOffset if (alt==0) alt=1 else alt=0 if (alt==0) curpos1=temp else curpos2=temp
  6. และส่วนสุดท้ายคือใน <Body> ให้ใส่ onload="Tm=setInterval('scrollwindow()',10)" เพื่อเรียกฟังก์ชั่นขึ้นมาทำงานครับ

Full Coding

<HTML> <HEAD> <script language="JavaScript1.2"> var speed=1 var currentpos=0,alt=1,curpos1=0,curpos2=-1 function scrollwindow(){ if (document.all) temp=document.body.scrollTop else temp=window.pageYOffset if (alt==0) alt=1 else alt=0 if (alt==0) curpos1=temp else curpos2=temp if (curpos1!=curpos2){ if (document.all) currentpos=document.body.scrollTop+speed else currentpos=window.pageYOffset+speed window.scroll(0,currentpos) } else{ clearInterval(Tm); } } </script> </HEAD> <BODY onload="Tm=setInterval('scrollwindow()',10);"> <H1>Welcome To RealDev.net</H1> <H1>Welcome To RealDev.net</H1> <H1>Welcome To RealDev.net</H1> <H1>Welcome To RealDev.net</H1> <H1>Welcome To RealDev.net</H1> <H1>Welcome To RealDev.net</H1> <H1>Welcome To RealDev.net</H1> <H1>Welcome To RealDev.net</H1> <H1>Welcome To RealDev.net</H1> <H1>Welcome To RealDev.net</H1> <H1>Welcome To RealDev.net</H1> <H1>Welcome To RealDev.net</H1> </BODY> </HTML>

Back to top





© copyright 2001 Sorrawut Korsuwansiri