CODE slide ảnh hoặc tin tức chạy từ dưới lên liên tục không ngắt quãng

CODE slide ảnh hoặc tin tức chạy từ dưới lên liên tục không ngắt quãng là một hiệu ứng khá đơn giản mà hiệu quả cho các trang tin tức. Đây là plugin thường được áp dụng cho các slide ảnh nằm ở sidebar trái hoặc sidebar phải của trang web. Bài viết hôm nay mình sẽ hướng dẫn các bạn code trình diễn ảnh cuộn từ dưới lên 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.

Các bạn có thể xem mẫu code cuộn ảnh hoặc text chạy từ dưới lên giống như bên dưới:

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:

<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à prev và next.

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:

#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 phù hợp mục đích 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.

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

$(function() {
 $('#news-ticker').newsTicker({
 row_height: 80,
 max_rows: 3,
 duration: 4000,
 prevButton: $('#prev'),
 nextButton: $('#next')
 });
});

Vậy là xong rồi đấy, bây giờ ban 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ác nào lười nữa thì copy toàn bộ đoạn code dưới đây và dán vào trong cặp thẻ <body> </body> của bạn là chạy thôi, tùy biến thêm 1 chút cho phù hợp với nội dung của bạn

<style>
#contentTicker {max-width: 500px; margin: auto;}
#newsTicker-scroll {text-align: center;}
#contentTicker li {color: #4e4e4e;background: #F2F2F2;overflow: hidden;height: 30px;padding: 5px;line-height: 30px;list-style: none;font-size: 16px;text-align: left;border-bottom: 1px dotted #2c8162;}a, a:hover,a:focus {color: #01579b; text-decoration: none; outline: 0;}
</style>
<div id="newsTicker-scroll">
<ul id="contentTicker">
 <li><a href="https://gicovietnam.blogspot.com/2017/07/code-slide-anh-hoac-tin-tuc-chay-lien-tuc.html">CODE slide ảnh hoặc tin tức chạy từ dưới lên liên tục không ngắt quãng</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/code-co-dinh-sidebar-khi-scroll-cuon-chuot.html">Code cố định Sidebar khi Scroll cuộn chuột lên xuống</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/hack-wifi-chua-nha-hang-xom-khong-can-mat-khau.html">Hack wifi chùa nhà hàng xóm không cần mật khẩu</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/06/code-tao-bai-viet-lien-quan-cho-blogsot.html">Code Tạo Bài Viết Liên Quan Cho Blogspot Gọn nhẹ</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/bat-buoc-like-facebook-de-xem-tiep-bai-viet.html">Bắt buộc LIKE Facebook để xem tiếp bài viết</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/06/huong-dan-dat-quang-cao-adsense-vao-giua-bai-viet-blog.html">Hướng dẫn đặt quảng cáo Adsense vào giữa bài viết trong Blogspot</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/1001-ky-nang-giat-tit-tieu-de-trong-tin-bat-dong-san.html">1001 Kỹ năng giật tít tiêu đề trong Đăng tin bất động sản</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/cach-reup-phim-len-youtube-khong-vi-pham-ban-quyen.html">Cách Reup phim lên Youtube không vi phạm bản quyền</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/huong-dan-chen-comment-facebook-vao-blog.html">Hướng dẫn chèn comment facebook vào blogspot có kiểm duyệt bình luận</a></li>
 <li><a href="https://gicovietnam.blogspot.com/2017/07/hang-loat-fanpage-lon-tren-facebook-bi-xoa.html">Hàng loạt Fanpage lớn trên Facebook bị xóa sổ mà không rõ lý do</a></li>
</ul>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.newsTicker.js"></script>
<script>
 var contentTicker = $('#contentTicker').newsTickerScroll({
  row_height: 50, //chieu cao khung newticker
  max_rows: 3,
  duration: 3000,
  prevButton: $('#nt-example1-prev'),
  nextButton: $('#nt-example1-next')
 });
</script>