JQuery Advanced News Ticker, tạo khối cuộn tin tự động

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à JQuery Advanced News Ticker để tự động cuộn tin lên xuống theo chiều dọc.

JQuery Advanced 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
<div id="news-container">
	<i class="fa fa-arrow-up" id="prev"></i>
	<ul id="news-ticker">
		<li>1) Lorem ipsum dolor sit amet, porta at, imperdiet id neque. more info</li> 
		<li>2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info</li> 
		<li>3) Lorem ipsum dolor sit amet more info more info more info more info</li>   
		<li>4) jugbit.com jquery vticker more info more info more info more info more info</li>
	</ul>
	<i class="fa fa-arrow-down" id="next"></i>
</div>

news-container là id của thẻ <div> tạo khối bao phía ngoài. Id này chỉ dùng để tạo style cho khối bằng CSS. news-ticker là id của thẻ <ul> chứa nội dung của các tin. Id này sẽ được dùng để tạo hiệu ứng cuộn tin bằng jQuery.

Các thẻ <i> dùng để tạo các nút cuộn Lên/Xuống có id tương ứng là prevnext.

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>) hoặc chèn vào file CSS cho gọn:

CSS Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#news-container {
	text-align: center;
}
#news-container i {
	font-size: 36px;
	margin: 8px;
	cursor: pointer;
}
#news-ticker li {
	color: #4e4e4e;
	background: #F2F2F2;
	overflow: hidden;
	height: 80px; /* Chiều cao mỗi tin */
	padding: 10px;
	line-height: 30px;
	font-size: 24px;
	text-align: left;
	border-bottom: 1px dotted #2c8162;
}

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 JQuery Advanced News Ticker

Tải JQuery Advanced News Ticker từ trang chủ của plugin này về, giải nén và copy file jquery.newsTicker.min.js về thư mục web đang làm việc. 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.min.js"></script>
<script type="text/javascript" src="js/jquery.newsTicker.min.js"></script>

Bước 4) Cài đặt plugin JQuery Advanced News Ticker:

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-ticker').newsTicker({ 
		row_height: 80,
		max_rows: 3,
		duration: 4000,
		prevButton: $('#prev'),
		nextButton: $('#next')
	});
});

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

Giải thích một số thông số mà bạn có thể tùy biến:

  • row_height: Chiều cao của một dòng, đơn vị là px. Mặc định là 22 px
  • max_rows: Số dòng sẽ hiển thị. Mặc định là 3 dòng
  • duration: Thời gian chuyển tin, đơn vị là mili giây. Mặc định là 2500 ms (2.5s)
  • prevButton: Phần tử dùng để cuộn lên (trước) một tin
  • nextButton: Phần tử dùng để cuộn xuống (sau) một tin

Bạn có thể xem thêm về plugin này tại đây để biết cách tùy biến cao hơn.

Lưu ý:

1. Bên trong mỗi thẻ <li> bạn có thể thay chữ bằng hình ảnh hoặc bất kỳ nội dung gì

2. Các thẻ <i> để tạo các nút Lên/Xuống dùng icon của Font Awesome. Bạn có thể thay bằng các ảnh bitmap của mình nếu thích bằng cách chỉnh sửa trong phần CSS.

Bạn hãy xem Demo tại link dưới đây để hiểu rõ hơn:

View Demo   Download Files

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

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