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 ดูตัวอย่าง ที่นี่ เลยครับ
ตัวอย่าง :
<<
>>

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

ผู้เขียน goragod โพสต์เมื่อ 25 ส.ค. 2553 เปิดดู 16,450 ป้ายกำกับ GAJAXAjaxJavascript
^