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 MyLop.BanMai.Info 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
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:
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> |
<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. <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à
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:
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.
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
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 pxmax_rows : Số dòng sẽ hiển thị. Mặc định là 3 dòngduration : 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 tinnextButton : 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:
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,
Lục Đức Thành
Latest posts by Lục Đức Thành (see all)
- Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
- Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
- WordPress 5 có gì mới? - 23/12/2018
- Sublime Text 3 Portable Windows 64 bit - 11/12/2017
- Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017