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.
Thực hiện: Sau khi download về bạn add các thư viện:
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>
Viết code jquery:
Code:
<script type="text/javascript">
$(document).ready(function(){
$('#horiz_container_outer').horizontalScroll(); });
</script>
Code html:
Code:
<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/
