在谷歌浏览器下实现div的无缝上下滚动

最新推荐文章于 2023-03-03 17:17:52 发布

?Uncle_Sam?

最新推荐文章于 2023-03-03 17:17:52 发布

阅读量273

点赞数

文章标签： js

本文链接：https://blog.csdn.net/UncleSamlim/article/details/106017350

版权

在谷歌浏览器下实现div的无缝上下滚动

<body>
	
			<div class="list" >
				<div class="list_child" id="marquee" style="overflow: hidden;">
					<div">请V101188到0111号窗口</div>

				<div">请V101188到0111号窗口</div>
				<div">请V101188到0111号窗口</div>
				<div">请V101188到0111号窗口</div>
				<div">请V101188到0111号窗口</div>
				<div">请V101188到0111号窗口</div>
				<div">请V101188到0111号窗口</div>

				</div>
				<!--</marquee>-->
			</div>
		</div>
<script>
		(function() {
			var marquee = document.getElementById('marquee');
			var offset = 0;
			var scrollheight = marquee.offsetHeight;
			var firstNode = marquee.children[0].cloneNode(true);
			marquee.appendChild(firstNode); 
			setInterval(function() {
				if(offset == scrollheight) {
					offset = 0;
				}
				marquee.style.marginTop = "-" + offset + "px";
				offset += 1;
			}, 50);
		})();
	</script>
</body>