H5新闻垂直滚动效果

最新推荐文章于 2025-08-05 14:19:08 发布

原创

最新推荐文章于 2025-08-05 14:19:08 发布 · 8.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#H5

本文介绍了如何创建不同类型的H5新闻垂直滚动效果，包括无缝滚动和间歇性滚动。通过设置滚动速度、延迟、高度等参数，可以实现各种样式。文章详细解释了无缝滚动的实现原理，即通过复制内容并进行位置调整来达到循环滚动的效果。

做成不同样式的垂直滚动：无缝垂直滚动，间歇性垂直滚动（一次滚动一条），间歇性垂直滚动（一次滚动两条）；

*先上代码（想知道原理的请往后看）~~~~*

变量解释：
speed：滚动的速度；
delay：暂停的时长；
scrollTop ：滚动的高度；
scrollHeight：滚动元素的高度；

1. 无缝垂直滚动（无停歇的一直滚动）

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			body{
				background-color: #FFFFFF;
			}
			.out{
				overflow: hidden;
				height: 21px;
				margin-top: 50px;
				padding-left: 20px;
			}
		</style>
	</head>

	<body>
		<div class="out" id="roll">
			<div>111111111</div>
			<div>222222222</div>
			<div>333333333</div>
			<div>44444444444</div>
			<div>555555555</div>
			<div&g