Xem bài viết jQuery và jCarousel Lite - Tạo thanh cuộn ấn tượng cho website tin tức

jQuery và jCarousel Lite - Tạo thanh cuộn ấn tượng cho website tin tức

Sep 29, 2012Jquery / Javascript
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é.

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.

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.
	/*========= 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" :
	
	/*========= ĐỊ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.
	/*========= ĐỊ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.
	
	<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:
	
	$(document).ready(function(){
		$(".jcarouse").jCarouselLite({  // Lấy class của ul và gọi hàm jCarouselLite() trong thư viện
			vertical: true,				// chạy theo chiều dọc
			hoverPause:true,			// Hover vào nó sẽ dừng lại
			visible: 6,					// Số bài viết cần hiện
			auto:500,					// Tự động scroll
			speed:1000					// Tốc độ scroll
		});
	});
		
Và đây là kết quả sau khi làm xong.
jQuery và jCarousel Lite - Tạo thanh cuộn ấn tượng cho website tin tức - 2Cwebvn

Kết luận

Bạn có thích bài viết 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, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments