GAJAX บทที่ 11 VScroll และ HScroll

HScroll และ VScroll เป็น Control ที่สร้างต่อจาก GScroll โดยมีความสามารถที่เพิ่มเติมขึ้นมาคือสามารถควบคุมการ Scroll ไปในทิศทางที่ต้องการได้โดย user

var scroller = new HScroll(container, scroller);

scroller.play(options);

HScroll และ VScroll มีการใช้งานที่เหมือนกันครับ โดยที่ HScroll จะเป็น Scroll ในแนวตั้งและ VScroll จะเป็นแนวนอน
container กรอบภายนอกสำหรับเป็นส่วนห่อหุ้ม
scroller กรอบภายในซึ่งเป็นส่วนที่จะถูกเลื่อน และใส่รูปภาพไว้ภายใน
options เป็นข้อมูลชนิด hash มี property ดังนี้
            speed: ความเร็วในการ scroll (30)
            duration: step การเคลื่อนที่ ของ scroller (5)

            arrowLeft: id ของส่วนที่เป็นลูกศรด้านซ้าย (arrowLeft) // สำหรับ VScroll เท่านั้น
            arrowRight: id ของส่วนที่เป็นลูกศรด้านขวา (arrowRight) // สำหรับ VScroll เท่านั้น

            arrowTop: id ของส่วนที่เป็นลูกศรด้านบน (arrowTop) // สำหรับ HScroll เท่านั้น
            arrowBottom: id ของส่วนที่เป็นลูกศรด้านล่าง (arrowBottom) // สำหรับ HScroll เท่านั้น

หมายเหตุ * สีชมพูเป็นค่า default

<style type="text/css">

#contianer-scroll {

  position: relative;

  width: 370px;

  height: 90px;

  overflow: hidden;

  border:1px solid #666666;

  float: left;

}

#scroller {

  position: absolute;

  width:630px;

  height: 80px;

  white-space: nowrap;

}

#scroller img { /* style ของรูปภาพ */

  float: left;

  margin: 5px;

}

#arrowLeft,#arrowRight { /* stylle ของ ลูกศรสำหรับเลื่อนรูปภาพ อาจใช้รูปแทนได้ */

  height: 90px;

  line-height: 90px;

  float: left;

  cursor: pointer;

}

</style>



<div id="arrowLeft">&lt;&lt;</div>

<div id="contianer-scroll">

<div id="scroller"><img alt="" src="m7a3c3.jpg" /> <img alt="" src="2ustct.jpg" /> <img alt="" src="vkpb74.jpg" /> <img alt="" src="epqb4e.jpg" /> <img alt="" src="khzmr3.jpg" /> <img alt="" src="et4dgs.jpg" /> <img alt="" src="9ya5qz.jpg" /> <img alt="" src="mctq78.jpg" /> <img alt="" src="egahru.jpg" /></div>

</div>

<div id="arrowRight">&gt;&gt;</div>



<script type="text/javascript">

new VScroll('contianer-scroll','scroller').play();

</script>

ส่วน HScroll ดูตัวอย่าง ที่นี่ เลยครับ

ตัวอย่าง :

คำแนะนำในการใช้งาน เพื่อป้องกันข้อผิดพลาดของบราวเซอร์รุ่นใหม่ๆ ผมแนะนำให้ใช้รูปภาพเรียงต่อๆกันไปโดยไม่ต้องขึ้นบรรทัดใหม่นะครับ ตามนี้