JS实现无缝滚动

最新推荐文章于 2024-07-06 00:08:38 发布

5t李

最新推荐文章于 2024-07-06 00:08:38 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签：原生 JS 无缝滚动

本文链接：https://blog.csdn.net/qq_41204714/article/details/82354092

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body {
	font-size: 12px;
	line-height: 24px;
	text-align: center; /*页面内容居中*/
}

* {
	/*去掉所有标签的margin和padding值*/
	margin: 0px;
	padding: 0px;
}

ul {
	list-style: none;
	/*去掉ul标签的默认点样式  */
}

a img {
	border: none;
	/*超链接下，图片的边框  */
}

a {
	color: #333;
	text-decoration: none;
	/*超链接样式  */
}
a:HOVER {
	color: #ff0000;
}
#news {
	width: 399px;
	height: 251px;
	background: url("images/adRotator_5.jpg") repeat-y;/*背景垂直排列  */
	background-size: cover;
	margin-left: auto;
	/*firefox下居中  */
	margin-right: auto;
	text-align: left;
	/*新闻内容靠左  */
	border: solid red 2px; 
}
#newst {
	width:399px;
	height:64px;
	background-color:gray;
}
#newst a {
	float: right;
	color: white;
	font-size: 26px;
	margin-right: 30px;
	margin-top: 30px;
	display: inline;
}
/*底部样式  */
#newsd{
	width:399px;
	height:16px;
	background-color: pink;
}
/*中间样式  */
#newsz{
	height: 144px;
	width:335px;
	margin-left: 35px;
	margin-top: 13px;
	margin-bottom: 14px;
	overflow: hidden;
	/*这个一定要加，免得撑高中间部分  */
}
#news ul li {
	height: 24px;
}
#news ul li a {
	width: 180px;
	float: left;
	display: block;
	overflow: hidden;
	background: url("images/bg-left.gif") 10px 5px no-repeat;
	text-indent: 15px;/*规定文本块中首行文本的缩进  */
	height: 24px;
}
#news ul li span{
	float: right;
	color: red;
}


</style>
</head>
<body>
	<marquee direction="left">我心事的消息</marquee>
	<!-- 新闻动态开始 -->
	<div id="news">
		<!-- 头部 -->
		<div id="newst">
			<a href="#">查看更多</a>
		</div>

		<!-- 中间 -->
		<div id="newsz">
			<ul id="p1">
				<li><a href="#">新闻滚动内容内容内容演示1</a><span>2016-09-09</span></li>
				<li><a href="#">新闻滚动内容内容内容演示2</a><span>2016-09-09</span></li>
				<li><a href="#">新闻滚动内容内容内容演示3</a><span>2016-09-09</span></li>
				<li><a href="#">新闻滚动内容内容内容演示4</a><span>2016-09-09</span></li>
				<li><a href="#">新闻滚动内容内容内容演示5</a><span>2016-09-09</span></li>
				<li><a href="#">新闻滚动内容内容内容演示6</a><span>2016-09-09</span></li>
				<li><a href="#">新闻滚动内容内容内容演示7</a><span>2016-09-09</span></li>
				<li><a href="#">新闻滚动内容内容内容演示8</a><span>2016-09-09</span></li>
				<li><a href="#">新闻滚动内容内容内容演示9</a><span>2016-09-09</span></li>
				<li><a href="#">新闻滚动内容内容内容演示10</a><span>2016-09-09</span></li>
			</ul>
			<ul id="p2">
				<li></li>
			</ul>
		</div>

		<!-- 底部 -->
		<div id="newsd">&nbsp;</div>
	</div>
</body>
<script type="text/javascript">
	/*获得滚动区域，也就是新闻中间部分div的ID，用变量area来表示它。  */
	var area = document.getElementById("newsz");
	var p1 = document.getElementById("p1");
	var p2 = document.getElementById("p2");
	
	/*当p1的高度超出area的高度时候  */
	if(area.offsetHeight <=p1.offsetHeight){
		/*复制p1到p2(为循环滚动做准备)*/
		p2.innerHTML = p1.innerHTML;
//		console.log("copy")
	}
	function goUp() {
		/*scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。  */
		area.scrollTop++;
		/*当p1刚好超出area的区域时候  */
		if(area.scrollTop >= p1.offsetHeight){
			/*立马让p1又退回到滚动区域  */
			area.scrollTop = 0;
		}
	}
	var mySet = setInterval("goUp()",50);
	area.onmouseover=function(){
		clearInterval(mySet);
	}
	area.onmouseout=function(){
		mySet = setInterval("goUp()",50);
	}
	
</script>
</html>

简单偷下懒，直接上代码了，在这里贴上JS原理详解链接：

https://blog.csdn.net/u010429424/article/details/77333311

5t李

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS实现无缝滚动

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;无缝滚动&lt;/title&gt;&lt;style type="text/css"&gt;body { font-size: 12px; line-height: 2
复制链接

扫一扫