Cấp bậc tác giả:

HTML

jCoverflip - jQuery CoverFlow Plugin

Được viết bởi QuangIT ngày 30/08/2013 lúc 12:15 AM
jCoverflip là một jQuery plugin giúp chúng ta tạo ra các coverflow -một giao diện có thể hiển thị hình ảnh hoặc bất kì nội dung nào.
  • 0
  • 1353
Tải tệp tin: Click ở đây

jCoverflip - jQuery CoverFlow Plugin


jCoverflip là một jQuery plugin giúp chúng ta tạo ra các coverflow -một giao diện có thể hiển thị hình ảnh hoặc bất kì nội dung nào.

jcoverflip.jpg

Nội dung được hiển thị ra bằng việc click vào bất kì mục nào hoặc sử dụng thanh công cụ slider kéo qua lại (jQuery UI slider).
jCoverflip dễ dàng tùy chỉnh số lượng mục cần hiển thị cũng như tốc độ di chuyển qua lại . Ngoài ra để trông phù hợp , bắt mắt hơn bạn có thể tùy chỉnh màu sắc, font , style.

Cách sử dụng :

Trước tiên, bạn cần làm 4 bước :
1 : Download jQuery 1.3 trở lên và jQuery UI 1.7.2
2 : Tải về jCoverflip
3 : Thêm style vào css của bạn:

.ui-jcoverflip {
position: relative;
}

.ui-jcoverflip--item {
position: absolute;
display: block;
}
#flip {
height: 200px;
width: 630px;
margin-bottom: 50px;
}

#flip .ui-jcoverflip--title {
position: absolute;
bottom: -30px;
width: 100%;
text-align: center;
color: #555;
}

#flip img {
display: block;
border: 0;
outline: none;
}

#flip a {
outline: none;
}


#wrapper {
height: 300px;
width: 630px;
overflow: hidden;
position: relative;
}

.ui-jcoverflip--item {
cursor: pointer;
}

4 : Chèn jCoverflip script sau jQuery and jQuery UI:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript" src="js/jquery.jcoverflip.js"></script>

Cách dùng đơn giản

Đoạn mã gọi jCoverflip

$(function(){
    jQuery( '#flip' ).jcoverflip()
});

Và mã HTML sẽ là:

<div id="wrapper">
    <ul id="flip">
        <li title="The first image" ><img src="img/1.png" /></li>
        <li title="A second image" ><img src="img/2.png" /></li>
        <li title="This is the description" ><img src="img/5.png" /></li>
        <li title="Another description" ><img src="img/4.png" /></li>
        <li title="A title for the image" ><img src="img/3.png" /></li>
    </ul>
</div>

jCoverflip chạy tốt với các trình duyệt phổ biến , để tìm hiểu kĩ hơn về cách sử dụng các bạn có thể tham khảo document tại đây

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML