GORAGOD.com

GAJAX บทที่ 10

GScroll เป็น Effect พื้นฐานอีกตัวหนึ่งครับที่สามารถใช้ทดแทน marquee ได้ และยังสามารถใช้ทำ Scroll Box ได้ด้วย โดยมีคุณสมบัติพิเศษ สามารถหยุดการ scroll ได้เอง เมื่อเอาเมาส์เข้าไปยังพื้นที่แสดงผล

var scroller = new GScroll(container,scroller);
scroller.play(options);

container กำหนด ID ของ Element ที่ห่อหุ้ม Scroller
scroller กำหนด ID ของ Element ภายใน ซึ่งจะเป็นส่วนที่เลื่อน
สำหรับ options เป็นข้อมูลชนิด hash มี property เช่น
   speed: ความเร็วในการ scroll (30)
   duration: ระยะห่างการเคลื่อนที่ในแต่ละ step ของ scroll (1)
   pauseit: คำหนดเป็น 0 เมื่อไม่ต้องการให้หยุดเมื่อเอาเมาส์เข้ามาในพื้นที่แสดงผล และกำหนดเป็น 1 เมื่อต้องการให้ทำงาน (1)
   scrollto: กำหนดเป็น top,bottom,left,right สำหรับ scroll ไปในทิศทางต่างๆ (top)

หมายเหตุ * สีชมพูคือค่า default

<style type="text/css">
.content-ex .container{
  overflow:hidden;
  position:relative;
  border:1px solid red;
}
#container1 {
  width: 150px;
  height: 150px;
  text-align: center;
}
#container2 {
  margin-top: 5px;
  width: 350px;
  height: 20px;
  line-height: 20px;
}
#container2 div {
  white-space: nowrap;
}
.content-ex .scroller{
  position:absolute;
}</style>

<div class="container" id="container1">
   <div class="scroller" id="scroller1">ตัวอย่างข้อความ<br />ตัวอย่างข้อความ<br />ตัวอย่างข้อความ<br />ตัวอย่างข้อความ<br />new GScroll( 'container1' , 'scroller1' ).play();</div>
</div>
<div class="container" id="container2">
   <div class="scroller" id="scroller2">new GScroll('container2','scroller2').play({'scrollto':'left'});</div>
</div>

<script type="text/javascript">
   new GScroll('container1','scroller1').play();
   new GScroll('container2','scroller2').play({'scrollto':'left'});
</script>

ในการใช้งานต้องใช้ร่วมกับ CSS ในการกำหนดคุณสมบัติของพื้นที่แสดงผลดังโค้ดด้านบนครับ โค้ด CSS สีแดงคือส่วนสำคัญครับที่ต้องกำหนด
ตัวอย่าง :
ตัวอย่างข้อความ
ตัวอย่างข้อความ
ตัวอย่างข้อความ
ตัวอย่างข้อความ
new GScroll( 'container1' , 'scroller1' ).play();
new GScroll('container2','scroller2').play({'scrollto':'left'});