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à vTicker để tự động cuộn tin lên xuống theo chiều dọc (News Ticker).
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 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <div id="news-container"> <ul> <li> <div>1) Lorem ipsum dolor sit amet, porta at, imperdiet id neque. more info</div> </li> <li> <div>2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info</div> </li> <li> <div>3) Lorem ipsum dolor sit amet more info more info more info more info</div> </li> <li> <div>4) jugbit.com jquery vticker more info more info more info more info more info</div> </li> </ul> </div> |
news-container là tên của khối bao phía ngoài. Để đạt kết quả đúng như ý muốn, hãy đặt nội dung các tin vào bên trong thẻ <div> bên dưới thẻ <li> mà không đặt trực tiếp ngay dưới thẻ <li>
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>):
1 2 3 4 5 6 7 8 9 10 11 | #news-container { width: 400px; margin: auto; margin-top: 30px; border: 5px solid #333333; } #news-container ul li div { border: 1px solid #aaaaaa; background: #ffffff; } |
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 vTicker
Tải vTicker từ trang chủ của plugin này hoặc tại đây, copy file jquery.vticker.js vào thư mục hiện tại. 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.js"></script> <script type="text/javascript" src="js/jquery.vticker.js"></script> |
Bước 4) Cài đặt Plugin vTicker:
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-container').vTicker({ speed: 500, pause: 3000, animation: 'fade', mousePause: false, showItems: 3 }); }); |
Vậy là xong, hãy mở trang web trên trình duyệt để xem kết quả.
Một số thông số mà bạn có thể tùy biến:
- speed: Tốc độ ẩn tin cũ, đơn vị mili giây
- pause: Tốc độ cuộn các tin, đơn vị mili giây. Mặc định 4 giây chuyển tin một lần
- animation: Hiệu ứng để làm ẩn tin cũ. Có 2 giá trị là “fade” hoặc để trống
- mousePause: true – Dừng cuộn khi di chuột vào, di chuột ra lại cuộn tiếp. Đây là giá trị mặc định. false: Luôn luôn cuộn
- showItems: Số tin sẽ hiển thị. Mặc định là 3 tin
- direction: Hướng cuộn tin, có hai giá trị là “up” (mặc định, cuộn lên) và “down” (cuộn xuống)
- height: Chiều cao của mỗi tin. Mặc định là 0, chiều cao tự động
Bạn có thể xem thêm về plugin này tại đây.
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
cho em xin file plugin vtick được không anh, e down k đc
Trong link này bạn nhé: http://mylop.edu.vn/examples/v-news-ticker.zip