jQuery實現(xiàn)消息滾動播放效果

更新時間：2022年02月24日 16:52:11 作者：祈澈菇?jīng)?

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)消息滾動播放效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)消息滾動播放的效果，供大家參考，具體內(nèi)容如下

場景需求：

在大屏幕上，消息會進行一個實時滾動播報的效果，將現(xiàn)有的內(nèi)容進行一個來回滾動的播放~~

代碼：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
? ? <head>
? ? ? ? <title>復選框checkbox自定義樣式</title>
? ? ? ? <meta name="viewport" content="width=device-width, initial-scale=1">
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? ? ? <link rel="stylesheet"  >
? ? ? ? <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
? ? ? ? <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
? ? ? ? <style>
? ? ? ? ? ? * {
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? }
? ??
? ? .contScend {
? ? ? ? width: 400px;
? ? ? ? height: 200px;
? ? ? ? background: #000000;
? ? ? ? margin: 20px auto;
? ? ? ? overflow: hidden;
? ? }
? ??
? ? .contScend ul {
? ? ? ? list-style: none;
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? color:red;
? ? ? ? font-size: 13px;
? ? }
? ??
? ? .contScend ul li {
? ? ? ? width: 100%;
? ? ? ? height: 40px;
? ? ? ? box-sizing: border-box;
? ? ? ? line-height: 40px;
? ? ? ? text-align: center;
? ? }
?
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <!-- 中間部分 -->
? ? ? ? <div class="contScend">
?
? ? ? ? </div>
? ? </body>
? ? <script type="text/javascript">
? ? ? ? $.ajax({
? ? ? ? ? ? url: "test.json",
? ? ? ? ? ? type: 'GET',
? ? ? ? ? ? dataType: 'json',
? ? ? ? ? ? success: function(data) {
? ? ? ? ? ? ? ? var html = "";
? ? ? ? ? ? ? ? html += '<ul>';
? ? ? ? ? ? ? ? $.each(data, function(i, item) { // ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? html += '<li>' + item.name + ':' + item.numb + '人' + '</li>';
?
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? html += '</ul>';
? ? ? ? ? ? ? ? $(".contScend").html(html);
? ? ? ? ? ? ? ? scroll();
? ? ? ? ? ? }
? ? ? ? });
?
? ? ? ? function scroll() {
? ? ? ? ? ? //獲得當前<ul>
? ? ? ? ? ? var $uList = $(".contScend ul");
? ? ? ? ? ? var timer = null;
? ? ? ? ? ? //觸摸清空定時器
? ? ? ? ? ? $uList.hover(function() {
? ? ? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? function() { //離開啟動定時器
? ? ? ? ? ? ? ? ? ? timer = setInterval(function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? scrollList($uList);
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? 1000);
? ? ? ? ? ? ? ? }).trigger("mouseleave"); //自動觸發(fā)觸摸事件
? ? ? ? ? ? //滾動動畫
? ? ? ? ? ? function scrollList(obj) {
? ? ? ? ? ? ? ? //獲得當前<li>的高度
? ? ? ? ? ? ? ? var scrollHeight = $("ul li:first").height();
? ? ? ? ? ? ? ? //滾動出一個<li>的高度
? ? ? ? ? ? ? ? $uList.stop().animate({
? ? ? ? ? ? ? ? ? ? ? ? marginTop: -scrollHeight
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? 600,
? ? ? ? ? ? ? ? ? ? function() {
? ? ? ? ? ? ? ? ? ? ? ? //動畫結(jié)束后，將當前<ul>marginTop置為初始值0狀態(tài)，再將第一個<li>拼接到末尾。
? ? ? ? ? ? ? ? ? ? ? ? $uList.css({
? ? ? ? ? ? ? ? ? ? ? ? ? ? marginTop: 0
? ? ? ? ? ? ? ? ? ? ? ? }).find("li:first").appendTo($uList);
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</html>

test.json

[{
? ? "name": "體驗區(qū)統(tǒng)計",
? ? "numb": 0
}, {
? ? "name": "test909",
? ? "numb": 0
}, {
? ? "name": "test910",
? ? "numb": 0
}, {
? ? "name": "111",
? ? "numb": 0
}, {
? ? "name": "test",
? ? "numb": 0
}, {
? ? "name": "test11111",
? ? "numb": 0
}, {
? ? "name": "記憶區(qū)統(tǒng)計",
? ? "numb": 0
}]

效果如下：