div+css+js 实现Marquee

最新推荐文章于 2023-09-04 08:26:46 发布

蜗牛乌龟一起走

最新推荐文章于 2023-09-04 08:26:46 发布

阅读量1k

点赞数 1

分类专栏：前端jqueryUI 文章标签： css javascript

本文链接：https://blog.csdn.net/qq_29897369/article/details/77824664

版权

前端jqueryUI 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

由于需要做一个无缝滚动的效果，于是使用<marquee><font size=+3 color=red>Hello, World</font></marquee> 该标签很方便使用起来这是简单的例子。关于<marquee></marquee>大家可以参考http://www.w3school.com.cn/cssref/index.asp#animation css使用手册。在此不做详细介绍。

之所以没有使用该标签是因为他不兼容火狐浏览器（IE、谷歌兼容）为了考虑兼容性所以动手自己写一个类似的效果。通过查找资料发现div+css+js 就可以实现上下无缝滚动效果。左右同理。代码如下：简单css 显示a 标签

<STYLE type=text/css>
#test a {
	width: 100%;
	overflow: hidden;
	font: 12px/16px tahoma;
	display: block;
	text-decoration: none;
	margin: 2px;
	color: #4a551c;
	padding-left: 2px;
	text-align: left;
}

#test a:hover {
	color:yellow;
}
</STYLE>

<body>里三个DIV 如下：

	<div id="test"
		style="overflow: hidden; height: 136px; width: 400px;background-color: blue">
		<div id=test1   style="background-color: red;">
			  <a href="#">1111111</a> <a href="#">22222</a>
			<a href="#">3333</a> <a href="#">44444</a>
			<a href="#">5555</a> <a href="#">66666</a>
			<a href="#">77777</a> <a href="#">88888</a>
		</div>
		<div id=test2  style="background-color:green "></div>
	</div>

最重要一步就是js 这个需要放到html 内容执行完之后执行不然获取不到div

	<script>
		var speed = 50
		var test = document.getElementById("test");
		var test1 = document.getElementById("test1");
		var test2 = document.getElementById("test2");
		test2.innerHTML = test1.innerHTML
		function MarqueeTest() {
			if (test2.offsetTop - test.scrollTop <= 0){
				test.scrollTop -= test1.offsetHeight
		}else {
				test.scrollTop=test.scrollTop+1;
			}
		}
		var MyMarquee = setInterval(MarqueeTest, speed)
		test.onmouseover = function() {
			clearInterval(MyMarquee)
		}
		test.onmouseout = function() {
			MyMarquee = setInterval(MarqueeTest, speed)
		}
	</script>

</body>
注意几点：滚动效果需要在子div长度大于父DIV 才会显示滚动效果也就test 的高度需要小于等于test1的高度。不然不会循环滚动。

蜗牛乌龟一起走

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
div+css+js 实现Marquee

由于需要做一个无缝滚动的效果，于是使用Hello, World 该标签很方便使用起来这是简单的例子。关于大家可以参考http://www.w3school.com.cn/cssref/index.asp#animation css使用手册。在此不做详细介绍。之所以没有使用该标签是因为他不兼容火狐浏览器（IE、谷歌兼容）为了考虑兼容性所以动手自己写一个类似的效果。通过查找资料发现div
复制链接

扫一扫