Cách hiển thị bản tin mới với jQuery News Ticker
Khi vào các trang tin tức, bạn thường thấy có rất nhiều trang hiển thị những bản tin mới nhất của họ ở một dòng nào đó trên trang chủ, và chúng thường đập vào mắt người xem ngay từ cái nhìn đầu tiên với những hiệu ứng hiển thị chữ khác nhau. Hôm nay mình sẽ chia sẻ với các bạn cách đơn giản nhất ...
Khi vào các trang tin tức, bạn thường thấy có rất nhiều trang hiển thị những bản tin mới nhất của họ ở một dòng nào đó trên trang chủ, và chúng thường đập vào mắt người xem ngay từ cái nhìn đầu tiên với những hiệu ứng hiển thị chữ khác nhau.
Hôm nay mình sẽ chia sẻ với các bạn cách đơn giản nhất để làm ứng dụng này cho website của mình, chỉ với việc sử dụng plugin jQuery News Ticker , nó rất nhẹ và dễ cài đặt để sử dụng.
Xem Demo | Download
Bước 1 : HTML
Giả sử chúng ta có đoạn tin cần hiển thị như sau :
<ul id="js-news" class="js-hidden">
<li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
<li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
<li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
<li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
</ul>
Bước 2 : Chèn jQuery
Đầu tiên các bạn tải bộ plugin jQuery này về ở mục download , sau đó giải nén ra, copy 2 file là jquery.ticker.js và ticker-style.css , rồi đặt tại folder web của các bạn. Kế tiếp là chèn khai báo vào ngay sau thẻ <head>
<link href="styles/ticker-style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script src="includes/jquery.ticker.js" type="text/javascript"></script>
Sau khi chèn xong, để hiển thị bản tin mới, các bạn chèn đoạn script sau ngay bên dưới :
<script type="text/javascript">
$(function () {
$('#js-news').ticker();
});
</script>
Chỉ cần vậy thôi là xong, và các bạn có thể kiểm tra kết quả hiển thị bản tin của mình. Tuy nhiên , nếu các bạn muốn thay đổi thông số cho phù hợp thì có thể tham khảo như sau :
$(function () {
$('#js-news').ticker({
speed: 0.10, // Tốc độ chạy hiệu ứng
ajaxFeed: false, // Hiển thị thông qua feed
feedUrl: false, // đường dẫn URL feed
feedType: 'xml', // Currently only XML
htmlFeed: true, // Hiển thị jQuery News Ticker qua HTML
debugMode: true, // HIển thị lỗi
controls: true, // Hiển thị điều khiển
titleText: 'Latest', // Nếu bạn muốn thay đổi tiêu đề thì thay ở đây
displayType: 'reveal', // Kiểu hiệu ứng 'reveal' hoặc 'fade'
direction: 'ltr', // Dòng chữ xuất hiện từ bên nào. có 2 lựa chọn là 'ltr' hoặc 'rtl'
pauseOnItems: 2000, // thời gian dừng
fadeInSpeed: 600, // tốc độ cho hiệu ứng face
fadeOutSpeed: 300 // tốc độ cho hiệu ứng face
});
});
Đoạn code bên trên chính là khai báo mặc định khi chúng ta thực hiện câu lệnh $(‘#js-news’).ticker(); Giả sử các bạn muốn hiệu ứng Fade xuất hiện thay cho hiệu ứng Reveal và thay đổi tiêu đề hiển thị thì các bạn làm như sau :
<script type="text/javascript">
$(function () {
$('#js-news').ticker({
speed: 0.10,
htmlFeed: false,
fadeInSpeed: 600,
displayType: 'fade',
titleText: 'Tin Mới'
});
});
</script>
Rất đơn giản và dễ thực hiện phải không các bạn. Chúc các bạn thành công !
Chuyên Mục: Javascript
Bài viết được đăng bởi webmaster
-
minhvien
-
papyrut
-
-
doanvu
