无缝滚动新闻

最新推荐文章于 2021-04-15 15:19:23 发布

dongsdh

最新推荐文章于 2021-04-15 15:19:23 发布

阅读量236

点赞数

分类专栏：微码 javascript武器库文章标签： javascript html css

本文链接：https://blog.csdn.net/dongsdh/article/details/80352307

版权

微码同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

javascript武器库

14 篇文章 1 订阅

订阅专栏

前言：（默认从下往上，可根据需求改运动效果）

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#demo {
				height: 24px;
				overflow: hidden;
				width: 100%;
				position: relative;
				box-sizing: border-box;
				padding-left: 8px;
			}
			
			#demo1 {
				height: auto;
				text-align: left;
			}
			
			#demo2 {
				height: auto;
				text-align: left;
			}
			
			#demo1 li {
				line-height: 25px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				list-style: none;
			}
			
			#demo2 li {
				line-height: 25px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				list-style: none;
			}
		</style>
	</head>

	<body>
		<div id="demo">
			<ul id="demo1">
				<li>新闻1</li>
				<li>新闻2</li>
				<li>新闻3</li>
				<li>新闻4</li>
			</ul>
			<div id="demo2"> </div>
		</div>
		</div>
		<script>
			var speed = 40
			var rolling = function() {
				var demo = document.getElementById("demo");
				var demo2 = document.getElementById("demo2");
				var demo1 = document.getElementById("demo1");
				demo2.innerHTML = demo1.innerHTML

				function Marquee() {
					if(demo.scrollTop >= demo1.offsetHeight) {
						demo.scrollTop = 0;
					} else {
						demo.scrollTop = demo.scrollTop + 1;
					}
				}
				var MyMar = setInterval(Marquee, speed)
				demo.onmouseover = function() {
					clearInterval(MyMar)
				}
				demo.onmouseout = function() {
					MyMar = setInterval(Marquee, speed)
				}
			}
			rolling();
		</script>
	</body>

</html>

dongsdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无缝滚动新闻

前言：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="author" content="http://www.jb51.net/" /&gt; &lt;title&gt;文字列表无缝向上滚动代码&
复制链接

扫一扫