HTML内容无缝连接滚动效果

最新推荐文章于 2024-05-13 01:08:40 发布

万德佛

最新推荐文章于 2024-05-13 01:08:40 发布

阅读量647

点赞数 1

分类专栏：前端 JavaScript HTML 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_39251440/article/details/119876639

版权

前端同时被 3 个专栏收录

41 篇文章 0 订阅

订阅专栏

JavaScript

32 篇文章 0 订阅

订阅专栏

HTML

18 篇文章 0 订阅

订阅专栏

以下仅供参考~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 父容器 -->
		<div id="marqueeA" style="width: 500px;height: 100px;overflow: scroll;">
			<!-- 容器1 -->
			<div id="sUBox">
				<div>内容1</div>
				<div>内容2</div>
				<div>内容3</div>
				<div>内容4</div>
				<div>内容5</div>
				<div>内容6</div>
				<div>内容7</div>
				<div>内容8</div>
			</div>
			<!-- 容器2为了无缝连接准备的 -->
			<div id="sUBoxB"></div>
		</div>
	</body>
	<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<!-- 这里就是我自定义的脚本 -->
	<script src="../../js/table/marquee.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//方法
		function setMarqueeInfo(){
			var mqa = new marqueeFun(50,'marqueeA','sUBox','sUBoxB');
			mqa.init();
		}
		setMarqueeInfo()
	</script>
</html>

/**
 * 文件 marquee.js
 * ES5 内容向上滚动效果
 * @param {Object} speed 间隔时间
 * @param {Object} tableBody 包含容器1 与 容器2 的父容器id
 * @param {Object} marqueeBox1 包含要显示table的容器1 id
 * @param {Object} marqueeBox2 容器2 id，用来克隆容器1 table内容，以达到向上滚动无缝连接效果
 */
function marqueeFun(speed,tableBody,marqueeBox1,marqueeBox2) {
	this.speed= speed || 30;
	this.marqueeBox1 = document.getElementById(marqueeBox1);
	this.marqueeBox2 = document.getElementById(marqueeBox2);
	this.tableBody = document.getElementById(tableBody);
	this.time = null;
}
marqueeFun.prototype = {
	constructor: marqueeFun,
	marquee: function () {
		//将容器1内容克隆到容器2
		this.marqueeBox2.innerHTML = this.marqueeBox1.innerHTML;
		//当父容器滚动距离顶部的高度大于box1的高度时赋值0
		if (this.tableBody.scrollTop >= this.marqueeBox1.offsetHeight)
			this.tableBody.scrollTop = 0;
		else {
			this.tableBody.scrollTop++;
		}
	},
	init: function(){
		this.tableBody.scrollTop = 0; // 开始无滚动时设为0
		var _self = this;
		this.stop();//重新调用时关闭之前的定时器
		//定时调用
		this.time = setInterval(this.marquee.bind(this), this.speed);
		//当鼠标滑入
		this.tableBody.onmouseover = function() {
			//当鼠标悬浮在table之上隐藏容器2，因为如果手动翻滚时就会出现重复的内容影响查看
			_self.stop();//结束定时器
			$(_self.marqueeBox2).hide();//隐藏box2
		}
		//当鼠标移出
		this.tableBody.onmouseout = function() {
			if(_self.marqueeBox1.innerHTML != ""){//当box2有数据的情况下才会调用
				$(_self.marqueeBox2).show();//显示box2接着滚动
				_self.time = setInterval(_self.marquee.bind(_self), _self.speed);
			}
		}
	},
	//结束定时器
	stop: function(){
		clearInterval(this.time);
		this.marqueeBox2.innerHTML = "";//清空box2的内容
	}
}

万德佛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML内容无缝连接滚动效果

以下仅供参考~<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body>  <div id="marqueeA" style="width: 500px;height: 100px;overflow: scroll;"> <
复制链接

扫一扫

专栏目录