H5不一樣樣式新聞垂直滾動效果

時間 2019-11-13

標籤 h5 不一樣樣式垂直滾動效果简体版

原文原文鏈接

變量解釋：
speed：滾動的速度；
delay：暫停的時長；
scrollTop ：滾動的高度；
scrollHeight：滾動元素的高度；javascript

1. 無縫垂直滾動（無停歇的一直滾動）css

<!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. 間歇性垂直滾動（一次滾動一條）html

<!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. 間歇性垂直滾動（一次滾動兩條）java

<!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>

原理：
取出要顯示文字的部分（這裏暫且稱其爲a部分），複製一份a部分自己鏈接在a部分後面，造成重複一次的效果（這裏暫且稱之爲aa部分）；隨着aa部分漸漸向上滾動，當aa部分滾動的高度與本來a部分的高度同樣的時候，將aa部分迅速挪到最初始的位置，便可實現循環滾動的效果；jquery

想要顯示多條數據，只須要改動out樣式的「height: 42px」部分便可；
————————————————
版權聲明：本文爲CSDN博主「fairydeng」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。
原文連接：https://blog.csdn.net/fairydeng/article/details/83274262app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。