jQuery Scrollbars tạo thanh cuộn ngang tự động scoll khi di chuột

Khi dữ liệu bạn trình bày vượt quá độ rộng trong website của bạn, thường ta sẽ dùng Style sheet để tạo thanh cuộn ngang nhưng khi bạn tạo với css thanh cuộn ngang sẽ không được đẹp cho lắm. Trong bài này tôi sẽ hướng dẫn bạn tạo Horizontal automatic Scrollbars.

Khi dữ liệu bạn trình bày vượt quá độ rộng trong website của bạn, thường ta sẽ dùng Style sheet để tạo thanh cuộn ngang nhưng khi bạn tạo với css thanh cuộn ngang sẽ không được đẹp cho lắm. Trong bài này tôi sẽ hướng dẫn bạn tạo Horizontal automatic Scrollbars.

DEMO  :: DOWNLOAD

Thực hiện: Sau khi download về bạn add các thư viện:

<link rel="stylesheet nofollow" type="text/css" href="jquery.horizontal.scroll.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="jquery.horizontal.scroll.js" type="text/javascript"></script>

Viết code jquery:

<script type="text/javascript"> $(document).ready(function(){ $('#horiz_container_outer').horizontalScroll(); }); </script>

Code html:

<ul id="horiz_container_outer"> <li id="horiz_container_inner"> <ul id="horiz_container"> <li>Image 1</li> <li>Image 2</li> <li>Image 3</li> <li>Image 4</li> <li>Image 5</li> </ul> </li> </ul> <div id="scrollbar"> <a id="left_scroll" class="mouseover_left" href="#"></a> <div id="track"> <div id="dragBar"></div> </div> <a id="right_scroll" class="mouseover_right" href="#"></a></div> </div>

Bạn có thể thay đổi các ảnh thành nội dung nếu dữ liệu scoll của bạn không phải là ảnh

Nội dung bài viết tham khảo trên http://htmldrive.net/

Nguồn: http://www.thietkewebsmart.com/html-css/jquery-scrollbars-tao-thanh-cuon-ngang-tu-dong-scoll-khi-di-chuot/900.htm