.jpg)
Với plugin này, các bạn có thể cuộn nội dung bên trong theo chiều ngang, chiều dọc, cuộn về bên trái hay bên phải, có thể cho nó tự động chạy ho
B1 :add thư viện jquery nếu chưa có
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>B2 : add style
<style>
/* Container DIV - automatically generated */
.simply-scroll-container {
position: relative;
}
/* Clip DIV - automatically generated */
.simply-scroll-clip {
position: relative;
overflow: hidden;
z-index: 2;
}
/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list {
position: absolute;
top: 0;
left:0;
z-index: 1;
overflow: hidden;
margin: 0;
padding:0;
}
.simply-scroll-list li {
padding: 0;
margin: 0;
}
ol#scroller{
list-style:none;
margin-left:5px;
float:left;
padding-left:5px;
text-align:left;
}
.simply-scroll-list li img {
border: none;
display: block;
}
/* Master button styles - note that left and right
versions are included although they are not used in this example */
.simply-scroll-btn {
position: absolute;
width: 42px;
height: 44px;
z-index:3;
cursor: pointer;
}
.simply-scroll-btn-left {
left: 6px;
bottom: 6px;
background-position: 0 -44px;
}
.simply-scroll-btn-left.disabled {
background-position: 0 0 !important;
}
.simply-scroll-btn-left:hover {
background-position: 0 -88px;
}
.simply-scroll-btn-right {
right: 6px;
bottom: 6px;
background-position: 84px -44px;
}
.simply-scroll-btn-right.disabled {
background-position: 84px 0 !important;
}
.simply-scroll-btn-right:hover {
background-position: 84px -88px;
}
.simply-scroll-btn-up {
right: 6px;
top: 6px;
background-position: -126px -44px;
}
.simply-scroll-btn-up.disabled {
background-position: -126px 0 !important;
}
.simply-scroll-btn-up:hover {
background-position: -126px -88px;
}
.simply-scroll-btn-down {
right: 6px;
bottom: 6px;
background-position: -42px -44px;
}
.simply-scroll-btn-down.disabled {
background-position: -42px 0 !important;
}
.simply-scroll-btn-down:hover {
background-position: -42px -88px;
}
/* Custom class modifications - adds to / overrides above
Vertical scroller example, with custom base class */
/* Container DIV */
.vert {
width: 190px; /* wider than clip for custom button pos. */
height: 210px;
}
/* Clip DIV */
.vert .simply-scroll-clip {
width: 190px;
height: 180px;
margin-top:10px;
margin-bottom: 5px;
}
/* Explicitly set height/width of each list item */
.vert .simply-scroll-list li {
width: 185px;
height: 26px;
padding-left:5px;
}
/* Modified button positions, overriding previous styles */
.vert .simply-scroll-btn-up {
right: 0;
top: 0;
}
.vert .simply-scroll-btn-down {
right: 0;
top: 52px;
}
</style>
B3 thêm chút kích hoạt để chạy
<script src='http://webvn20.googlecode.com/files/jquery.simplyscroll.js' type='text/javascript'></script>B4 html để có thể chạy bạn có thể thêm khi có ai liên kết đến
<script type='text/javascript'>
//<![CDATA[
(function($) {
$(function() { //on DOM ready
$("#scroller").simplyScroll({
customClass: 'vert',
orientation: 'vertical',
auto: true,
manualMode: 'loop',
frameRate: 24,
speed: 2
});
});
})(jQuery);
//]]>
</script>
<ol id="scroller">
<li><a href="http://tivi24.blogspot.com/" target=
"_blank">01-Truyền Hình Việt Nam</a></li>
<li><a href="http://emoticonsgo.blogspot.com/" target=
"_blank">02-Emoticons</a></li>
<li><a href="http://i888.blogspot.com/" target=
"_blank">03-Ảnh Hot </a></li>
<li><a href="http://g888.blogspot.com/" target=
"_blank">04-Ảnh Đẹp</a></li>
<li><a href=http://phimtoi.blogspot.com/" target=
"_blank">05-Phim Buổi tối</a></li>
<li><a href="http://watchonlinego.blogspot.com/" target=
"_blank">06-Tivi Online</a></li>
<li><a href="http://khosachvn.blogspot.com/" target=
"_blank">07-Kho sách chia sẻ</a></li>
<li><a href="http://dailyxeoto.blogspot.com/" alt="toyota thăng long" target=
"_blank">08-Toyota Thăng Long</a></li>
<li><a href="http://www.vusteven.info" target=
"_blank" alt="Vũ Steven | Chia Sẻ Thủ Thuật - Giải Trí Tổng Hợp">09-Vũ Steven [ INFO ]</a></li>
<li><a href="http://namkna.blogspot.com/" target=
"_blank" alt="namkna blog">10-Namkna blog</a></li>
<li><a href="http://www.thuvienthuthuat.com/" title="thu vien Thủ thuật" target="_blank">11-thư viện thủ thuật</a></li>
<li><a href="http://gameto9.blogspot.com/" title="play game to 9 " target="_blank">12-play game to 9</a></li>
<li><a href="http://onlinegames360.blogspot.com/" title="play online games 360 " target="_blank">13-play game online 360</a></li>
</ol>
<br/>
<hr/>
<font style="color:Black;font-size:14px;font-weight:bolder">♪ <a class="anime" href="http://shimivn.blogspot.com/2012/04/trao-oi-lien-ket-link-exchange.html">Trao Đổi Link</a> ♫
</font>
Chúng ta sẽ cần định dạng cơ bản cho
hiệu ứng ở css, các bạn có thể ấn định kích thước chiều ngang hay
chiều dọc cũng như độ cao của nội dung cần cuộn (scroll).
Và sau đây là danh sách các lựa chọn dành cho bạn khi sử dụng plugin này : ở B3
| Property | Default | Description |
|---|---|---|
| customClass | ‘simply-scroll’ | Tên class cần định dạng |
| frameRate | 24 | Số frame trên giây |
| speed | 1 | Số lượng pixel di chuyển trên 1 frame |
| orientation | ‘horizontal’ | Nếu muốn cuộn chiều ngang thì đặt ‘horizontal’ còn chiều dọc thì đặt ‘vertical’ |
| direction | ‘forwards’ | ‘forwards’ hoặc ‘backwards’ |
| auto | true | Tự động cuộn, nếu muốn tắt thì đặt giá trị là false |
| autoMode | ‘loop’ | auto = false, ‘loop’ or ‘end’ (end-to-end) |
| manualMode | ‘end’ | auto = false, ‘loop’ or ‘end’ (end-to-end) |
| pauseOnHover | true | Dừng lại khi rê chuột vào , thay đổi giá trị false thì ngược lại |
| pauseOnTouch | true | Hỗ trợ tính năng Touch |
| pauseButton | false | Tạo nút dừng (pause) |
| startOnLoad | false | Khởi tạo plugin khi window load |
No comments: