Cách hiển thị bản tin mới với jQuery News Ticker

18/10/2013

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.

Cách hiển thị bản tin mới với jQuery News Ticker

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.jsticker-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:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !