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

[nmhung]

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:


<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:


<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/

[keke007]

thanks, vì các đoạn code đã chia sẻ

[hanoimuabay]

Mình cũng đang tìm về cái này. Thanks bạn nhé

[visa2013]

gõ nguyên đoạn code này là sẽ dc phải không mọi người

[ngocnhanvo]

Thanks ^.^


onlinE Solution Company (ESC) với 10 năm kinh nghiệm trong lĩnh vực thiết kế website luôn mong muốn đáp ứng được đầy đủ nhu cầu của khách hàng. :x