jQuery实现大屏滚动播放的效果

最新推荐文章于 2024-10-12 15:30:21 发布

前端王小婷

最新推荐文章于 2024-10-12 15:30:21 发布

阅读量644

点赞数

原文链接：https://www.jianshu.com/p/656b75329b82

版权

场景需求：
在大屏幕上，消息会进行一个实时滚动播报的效果，将现有的内容进行一个来回滚动的播放~~

代码：

<!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" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<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"); //自动触发触摸事件
			//滚动动画
			function scrollList(obj) {
				//获得当前<li>的高度
				var scrollHeight = $("ul li:first").height();
				//滚动出一个<li>的高度
				$uList.stop().animate({
						marginTop: -scrollHeight
					},
					600,
					function() {
						//动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
						$uList.css({
							marginTop: 0
						}).find("li:first").appendTo($uList);
					});
			}
		}
	</script>
</html>

test.json

[{
	"name": "体验区统计",
	"numb": 0
}, {
	"name": "test909",
	"numb": 0
}, {
	"name": "test910",
	"numb": 0
}, {
	"name": "111",
	"numb": 0
}, {
	"name": "test",
	"numb": 0
}, {
	"name": "test11111",
	"numb": 0
}, {
	"name": "记忆区统计",
	"numb": 0
}]

效果如下：

在这里插入图片描述