News Ticker, tạo khối cuộn tin tự động bằng jQuery

Cuộn tin tự động là một hiệu ứng khá đơn giản mà hiệu quả cho các trang tin tức. Hôm nay MyLớp.edu.vn sẽ hướng dẫn bạn cách tạo ra hiệu ứng này bằng cách sử dụng một plugin của jQuery có tên là vTicker để tự động cuộn tin lên xuống theo chiều dọc (News Ticker).

News Ticker, tạo khối cuộn tin tự động bằng jQuery

View Demo   Download Files

Bước 1) Tạo tài liệu HTML. Trong thẻ <body>, chèn khối tin vào vị trí mong muốn theo cấu trúc sau:

HTML Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="news-container">
	<ul>
		<li>
			<div>1) Lorem ipsum dolor sit amet, porta at, imperdiet id neque. more info</div>
		</li> 
		<li>
			<div>2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info</div>
		</li> 
		<li>
			<div>3) Lorem ipsum dolor sit amet more info more info more info more info</div>
		</li>   
		<li>
			<div>4) jugbit.com jquery vticker more info more info more info more info more info</div>
		</li>
	</ul>
</div>

news-container là tên của khối bao phía ngoài. Để đạt kết quả đúng như ý muốn, hãy đặt nội dung các tin vào bên trong thẻ <div> bên dưới thẻ <li> mà không đặt trực tiếp ngay dưới thẻ <li>

Bước 2) Tạo Style cho khối tin. Chèn đoạn code CSS sau trong phần <head> của tài liệu HTML (trong thẻ <style>):

CSS Code:
1
2
3
4
5
6
7
8
9
10
11
#news-container	{
	width: 400px; 
	margin: auto;
	margin-top: 30px;
	border: 5px solid #333333;
}
 
#news-container ul li div {
	border: 1px solid #aaaaaa;
	background: #ffffff;
}

Bạn có thể tự sửa hoặc thêm vào các thuộc tính cho giống với thiết kế của bạn.

Bước 3) Liên kết tới thư viện jQuery và plugin vTicker

Tải vTicker từ trang chủ của plugin này về thư mục hiện tại. Trong thẻ <head> của tài liệu HTML, chèn các đoạn code sau.

HTML Code:
1
2
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.vticker.js"></script>

Bước 4) Cài đặt Plugin vTicker:

Tạo một thẻ <script> mới bên dưới các thẻ <script> vừa chèn ở Bước 3) và chèn vào đoạn code sau

JavaScript Code:
1
2
3
4
5
6
7
8
9
$(function() {
	$('#news-container').vTicker({ 
		speed: 500,
		pause: 3000,
		animation: 'fade',
		mousePause: false,
		showItems: 3
	});
});

Vậy là xong, hãy mở trang web trên trình duyệt để xem kết quả.

Một số thông số mà bạn có thể tùy biến:

  • speed: Tốc độ ẩn tin cũ, đơn vị mili giây
  • pause: Tốc độ cuộn các tin, đơn vị mili giây. Mặc định 4 giây chuyển tin một lần
  • animation: Hiệu ứng để làm ẩn tin cũ. Có 2 giá trị là “fade” hoặc để trống
  • mousePause: true – Dừng cuộn khi di chuột vào, di chuột ra lại cuộn tiếp. Đây là giá trị mặc định. false: Luôn luôn cuộn
  • showItems: Số tin sẽ hiển thị. Mặc định là 3 tin
  • direction: Hướng cuộn tin, có hai giá trị là “up” (mặc định, cuộn lên) và “down” (cuộn xuống)
  • height: Chiều cao của mỗi tin. Mặc định là 0, chiều cao tự động

Bạn có thể xem thêm về plugin này tại đây.

Một số từ khóa để tìm kiếm:

– News Ticker, News Ticker jQuery

– Vertical News Ticker, Vertical News Ticker jQuery

Kết luận

Đây là một hiệu ứng đơn giản, rất hiệu quả cho các trang tin tức và dễ cài đặt. Chúc bạn thành công!

Cheers,

AZDigi - Hosting WordPress tốt nhất!
The following two tabs change content below.
Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Bình luận

2 thoughts on “News Ticker, tạo khối cuộn tin tự động bằng jQuery

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

*
*
Website