html+css+js实现无缝隙跑马灯

小马大咖

已于 2023-03-30 09:23:58 修改

阅读量605

点赞数 1

于 2022-06-09 20:06:23 首次发布

本文链接：https://blog.csdn.net/m0_67063430/article/details/125209992

版权

JavaScript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

实现跑马灯效果的JS很多，但是很多不好用，下面介绍一个比较好用的。

效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<style>
			#kefu{
				width: 500px;
				height: 500px;
				margin: 0 auto;
				overflow: hidden;
				background-color: rgba(1, 1, 1, 0.2);
			}
			ul{
				width: 500px;
				height: 500px;
				display: flex;
				justify-content: space-between;
			}
			li{
				list-style-type: none;
			}
			li p{
				color: #ff0000;
				font-size: 120%;
				width: 400px;
				height: 90px;
			}
		</style>
	</head>
	<body>
		<div id="kefu">
			<ul>
				<li>
					<p>1.线路一</p>
					<p>2.线路二</p>
					<p>3.线路三</p>
					<p>4.线路四</p>
					<p>5.线路五</p>
				<li>
					<p>45</p>
					<p>25</p>
					<p>42</p>
					<p>12</p>
					<p>16</p>
				</li>
			</ul>
		</div>
		<script>
			$.fn.scrollTop = function(options) {
				var defaults = {
					speed: 40
				}
				var opts = $.extend(defaults, options);
				this.each(function() {
					var $timer;
					var scroll_top = 0;
					var obj = $(this);
					var $height = obj.find("ul").height();
					obj.find("ul").clone().appendTo(obj);
					$timer = setInterval(function() {
						scroll_top++;
						if (scroll_top > $height) {
							scroll_top = 0;
						}
						obj.find("ul").first().css("margin-top", -scroll_top);
					}, opts.speed);
				})
			}
			$("#kefu").scrollTop({
				speed: 20 //数值越大 速度越慢
			});
		</script>
	</body>
</html>