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

Html & Javascript 25-5-2015

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.

jQuery, jQuery News Ticker, jQuery plugin, thủ thuật javascript, tự học jquery

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.