Mỗi bài viết là một sản phẩm, một điều gì đó của 2Cwebvn muốn gởi tặng chia sẽ cho các bạn, có thể nói là như thế, đặc biệt là các bài viết về kiến thức lập trình có kèm theo demo. Bài viết hôm nay của 2Cwebvn cũng không ngoại lệ, bài hôm nay mình xin gởi đến cho các bạn cách tạo box, tạo thanh cuộn ấn tượng bằng jQuery và jCarousel Lite để trình bày đẹp mắt các tin cho các website tin tức hay bài viết cho các blog.Không làm mất thời gian các bạn nữa, giờ mình cùng bắt đầu vào bài viết nào :)
Trước khi bắt đầu vào biết viết thì mình cùng xem qua demo để biết mình sẽ làm gì nhé.
demo download
1. PHẦN HTML
Phần này chúng ta sẽ tạo 1 thẻ div với id="demo" để định dạng cho khung chứa, bên trong sẽ là div với class="title" dịnh dạng cho phần tiêu đề. Kế tiếp là ul với class="jcarouse", với class này ta sẽ viết jQuery cho nó, bên torng là các thẻ li như cấu trúc bên dưới.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <div id="demo"> <div class="title">Bài viết nổi bật</div><div class="jcarouse"><ul><li><div class="thumb"><img src="images/hinh01.jpg"></div><div class="info"><a href="#">16 kiểu shadow bạn cần phải biết.</a></div><div class="clr"></div></li><li><div class="thumb"><img src="images/hinh02.jpg"></div><div class="info"><a href="#">CV "độc" cho dân thiết kế</a></div><div class="clr"></div></li><ul></ul></ul></div></div> |
2. PHẦN CSS
Để chi tiết cho phần CSS này mình chia ra các phần nhỏ để cho các bạn dễ đọc:
Phần đầu tiên là mình phải reset style của trình duyệt và định dạng một chút cho trang.
1
2
3
4
5
6
7
| /*========= RESET STYLE TRÌNH DUYỆT & ĐỊNH DẠNG TRANG ========*/@charset "utf-8";* { margin:0; padding:0; }body{ background:#FFFCF7;}h1{margin:30px auto 0px; width:590px;}h1 a{text-decoration:none; font-size:14px; color: #999;}h1, h1 a:hover{color: #DB2E66; } |
Tiếp theo sẽ là định dạng cho box với id="demo" :
1
2
3
4
5
6
7
8
9
10
11
12
13
| /*========= ĐỊNH DẠNG BOX #demo ========*/#demo { width:320px; font-size:12px;background:#EAF4F5; padding:5px 5px 0; margin:20px auto;font-family:Verdana,Arial,Sans-Serif;}#demo a { text-decoration:none; }#demo img { border: 2px solid #FFFFFF; }#demo .title {color:#514448; padding:5px; font-size:14px;font-weight:bold;} |
Cuối cùng là định dạng cho ul với class="jcarouse" và các li bên trong.
1
2
3
4
5
6
7
8
| /*========= ĐỊNH DẠNG BOX .jcarouse ========*/.jcarouse { width:320px; }.jcarouse ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }.jcarouse ul li a{ display:block; color:#514448; width:200px; }.jcarouse ul li a:hover{ display:block; color:#DB2E66; }.jcarouse .thumb { float:left; width:110px; height:50px; }.jcarouse .info { float:right; width:210px; }.clr { clear: both; } |
3. PHẦN JQUERY
Trước tiên thì mình cần include thư viện của jQuery và jCarousel Lite vào.
1
2
| <script src="jquery-latest.pack.js" type="text/javascript"></script><script src="jcarousellite_1.0.1c4.js" type="text/javascript"></script> |
Tiếp theo là code jQuery cho ứng dụng của mình:
1
2
3
4
5
6
7
8
9
| $(document).ready(function(){$(".jcarouse").jCarouselLite({ // Lấy class của ul và gọi hàm jCarouselLite() trong thư việnvertical: true, // chạy theo chiều dọchoverPause:true, // Hover vào nó sẽ dừng lạivisible: 6, // Số bài viết cần hiệnauto:500, // Tự động scrollspeed:1000 // Tốc độ scroll});}); |
Và đây là kết quả sau khi làm xong.
Kết luận
Bạn có thích bài hướng dẫn này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, 2Cwebvn xin cảm ơn!
Mọi ý kiến thắc mắc hay đóng góp xin gởi về cho chúng tôi bằng form bình luận bên dưới, xin chúc các bạn thành công!
Comments[ 0 ]
Đăng nhận xét