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.
Thực hiện: Sau khi download về bạn add các thư viện:
Viết code jquery:Code:<link rel="stylesheet" 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>
Code html:Code:<script type="text/javascript"> $(document).ready(function(){ $('#horiz_container_outer').horizontalScroll(); }); </script>
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à ảnhCode:<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>
Nội dung bài viết tham khảo trên http://htmldrive.net/
Bookmarks