ALS – Any List Scroller là một jQuery Plugin được phát triển bởi musings.it dùng cho việc tạo hiệu ứng cuộn danh sách cho các sản phẩm, ảnh, hay bất kì nội dung nào khác. Các bạn có thể tạo các hiệu ứng cuộn liên tục, vô tận và điều hướng giữa các items. Để hiểu rõ hơn về plugin này, các bạn có thể xem phần demo bên dưới, với những thuộc tính được ấn tình tùy theo từng demo.
HTML
Đầu tiên, chúng ta xây dựng khung chuẩn html như sau :
<div class="als-container" id="demo1">
<span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>
<div class="als-viewport">
<ul class="als-wrapper">
<li class="als-item"><img src="images/arancio.png" alt="orange" title="orange" />orange</li>
<li class="als-item"><img src="images/mela.png" alt="apple" title="apple" />apple</li>
<li class="als-item"><img src="images/banana.png" alt="banana" title="banana" />banana</li>
<li class="als-item"><img src="images/mirtillo.png" alt="blueberry" title="blueberry" />blueberry</li>
<li class="als-item"><img src="images/anguria.png" alt="watermelon" title="watermelon" />watermelon</li>
<li class="als-item"><img src="images/ciliegia.png" alt="cherry" title="cherry" />cherry</li>
<li class="als-item"><img src="images/fragola.png" alt="strawberry" title="strawberry" />strawberry</li>
<li class="als-item"><img src="images/avocado.png" alt="avocado" title="avocado" />avocado</li>
<li class="als-item"><img src="images/pera.png" alt="pear" title="pear" />pear</li>
<li class="als-item"><img src="images/ananas.png" alt="pineapple" title="pineapple" />pineapple</li>
<li class="als-item"><img src="images/papaya.png" alt="papaya" title="papaya" />papaya</li>
<li class="als-item"><img src="images/lampone.png" alt="raspberry" title="raspberry" />raspberry</li>
</ul>
</div>
<span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>
</div>
Đoạn html bên trên rất đơn giản , chỉ có thẻ <div> cùng với hình ảnh được chèn vào từng phần tử <li>.
CSS
Kế tiếp, chúng ta sẽ định dạng chung cho scroller.
.als-container{
position:relative;
width:960px;
margin:0 auto;
z-index:0;
}
.als-viewport{
position:relative;
overflow:hidden;
margin:0px auto;
}
.als-wrapper{
position:relative;
list-style:none;
}
.als-item{
position:relative;
display:block;
text-align:center;
cursor:pointer;
float:left;
}
.als-prev, .als-next{
position:absolute;
cursor:pointer;
clear:both;
}
Tùy theo kích thước hình ảnh hoặc kiểu hiệu ứng mà các bạn muốn sẽ có những cách định dạng css khác nhau. Đây là phần css dành cho demo 1trong bài viết này.
/* specific styling for #demmo1 */
#demo1{
margin:40px auto;
}
#demo1 .als-item{
margin:0px 5px;
padding:4px 0px;
min-height:120px;
min-width:100px;
text-align:center;
}
#demo1 .als-item img{
display:block;
margin:0 auto;
vertical-align:middle;
}
#demo1 .als-prev, #demo1 .als-next{
top:40px;
}
#demo1 .als-prev{
left:200px;
}
#demo1 .als-next{
right:200px;
}
jQuery
Việc sử dụng plugin rất đơn giản, đầu tiên là chèn thư viện jQuery và plugin vào.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.als-1.7.min.js"></script>
Sau đó là chèn đoạn script khai báo như sau:
$("#demo1").als({
visible_items : 3,
scrolling_items: 2,
orientation:"horizontal",
circular:"no",
autoscroll:"no"
});