H5类似淘宝头条垂直滚动效果

最新推荐文章于 2023-01-02 21:27:42 发布

csdn-Allen

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量849

点赞数

文章标签： H5类似淘宝头条垂直滚动效果

本文链接：https://blog.csdn.net/baidu_41601299/article/details/90173928

版权

不同样式的垂直滚动：

无缝垂直滚动；
间歇性垂直滚动（一次滚动一条）；
间歇性垂直滚动（一次滚动两条）；

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

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

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>66666666</div>
			<div>777777777777</div>
			<div>888888888888</div>
		</div>
		
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
		<script type="application/javascript">
			var speed = 100;
			window.onload = function(){
				var area = document.getElementById("roll");
				area.innerHTML += area.innerHTML;
				function scroll(){
					if(area.scrollTop >= area.scrollHeight/2){
						area.scrollTop = 0;
					}else{
						area.scrollTop++;
					}
				}
				
				setInterval(scroll,speed);
			}
		</script>
	</body>

</html>

2. 间歇性垂直滚动（一次滚动一条）

<!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>66666666</div>
			<div>777777777777</div>
			<div>888888888888</div>
		</div>
		
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
		<script type="application/javascript">
			var speed = 100;
			var delay = 2000;
			var height = 21;
			var time;
			window.onload = function(){
				var area = document.getElementById("roll");
				area.innerHTML += area.innerHTML;
				function scroll(){
					if(area.scrollTop % height == 0){
						clearInterval(time);
						setTimeout(start,delay);
					}else{
						area.scrollTop++;
						if(area.scrollTop >= area.scrollHeight/2){
							area.scrollTop = 0;
						}
					}
					
				}
				function start(){
					time = setInterval(scroll,speed);
					area.scrollTop++;
				}
				setTimeout(start,delay);
			}
		</script>
	</body>
</html>

3. 间歇性垂直滚动（一次滚动两条）

<!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: 42px;
				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>66666666</div>
			<div>777777777777</div>
			<div>888888888888</div>
		</div>
		
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
		<script type="application/javascript">
			var speed = 100;
			var delay = 2000;
			var height = 42;
			var time;
			window.onload = function(){
				var area = document.getElementById("roll");
				var counts = $("#roll").find("div").length;
				area.innerHTML = area.innerHTML + area.innerHTML + area.innerHTML;
				function scroll(){
					if(area.scrollTop % height == 0){
						clearInterval(time);
						setTimeout(start,delay);
					}else{
						area.scrollTop++;
						if(counts % 2 ==0 ){
							if(area.scrollTop >= area.scrollHeight/3){
								area.scrollTop = 0;
							}
						}else{
							if(area.scrollTop >= area.scrollHeight*2/3){
								area.scrollTop = 0;
							}
						}
					}
				}
				function start(){
					time = setInterval(scroll,speed);
					area.scrollTop++;
				}
				setTimeout(start,delay);
			}
		</script>
	</body>

</html>