javaScript实现HTML页面分屏滚动效果

最新推荐文章于 2024-04-24 09:22:16 发布

一粒马豆

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量8.5k

点赞数 2

文章标签： javascript html css 分屏滚动

本文链接：https://blog.csdn.net/maillibin/article/details/51446983

版权

javaScript实现HTML页面分屏滚动效果，非常简易，只需要使用onscroll事件和scrollTop属性就能控制。

<!DOCTYPE html>
<HTML>

<HEAD>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<TITLE></TITLE>

<STYLE TYPE="TEXT/CSS">
body{
	margin:0px;
	padding:0px;
	color:#FFFFFF;
}
.maindiv{
	position:absolute;
	width:100%;
	height:100%;
	overflow:auto;
}
.radiodiv{
	position:absolute;
	bottom:30%;
	right:20px;
	display:inline-table;
	text-align:right;
}
.contentdiv{
	position:absolute;
	width:100%;
	height:100%;
	color:#999999;
	background-color:#333333;
}
#contentdiv1{
	top:0%;
	background-color:#000000;
}
#contentdiv2{
	top:100%;
	background-color:#333333;
}
#contentdiv3{
	top:200%;
	background-color:#666666;
}
#contentdiv4{
	top:300%;
	background-color:#999999;
}
#contentdiv5{
	top:400%;
	background-color:#CCCCCC;
}


</STYLE>

<SCRIPT TYPE="TEXT/JAVASCRIPT">

	function $(id){
		return document.getElementById(id);
	}

	//浏览器窗口高度
	var windowHeight=900;
	var currentN=1;
	var currentTop=0;
	var scrollDirection=1;
	var clock;

	window.οnresize=function(){
		windowHeight=document.documentElement.clientHeight;
	}

	window.οnlοad=function(){
	
		//获取浏览器窗口高度
		windowHeight=document.documentElement.clientHeight;

		
		//主显DIV滚动事件处理
		$("maindiv").οnscrοll=function(){
		
			//获取当前滚动的顶线位置
			var tempTop=$("maindiv").scrollTop;
			
			//计算当前在第几个主画面
			n=Math.round(tempTop/windowHeight)+1;
			
			radio(n);
			
			//判断滚动方向
			if(tempTop>currentTop){
				scrollDirection=1;				
			}else if(tempTop<currentTop){
				scrollDirection=-1;
			}
			
			//滑动动画			
			clearInterval(clock);
			clock=setInterval(animation,1);			

			//每次滚动完毕将位置存入变量以供比较判断滚动方向
			currentTop=$("maindiv").scrollTop;
			
			//$("informationdiv").innerHTML="方向"+scrollDirection+" "+n+"th screen "+"scroll top of maindiv"+currentTop+" window height:"+windowHeight;		
			
		}
	}

	//选中第n个radio
	function radio(n){
		$("radio"+n).checked="true";
	}
	
	//点选RADIO后直接跳转至第n屏
	function showScreen(n){
		radio(n);
		var targetTop=(n-1)*windowHeight;
		$("maindiv").scrollTop=targetTop;			
	}
	
	//分屏滑动动画效果
	function animation(){

		if(scrollDirection==1){
			//上行
			if($("maindiv").scrollTop%windowHeight!=0){
				$("maindiv").scrollTop+=1;
			}else{
				clearInterval(clock);		
			}	
		}
		
		if(scrollDirection==-1){
			//下行			
			if($("maindiv").scrollTop%windowHeight!=0){
				$("maindiv").scrollTop-=1;
			}else{
				clearInterval(clock);
			}		
		}


	}
	

</SCRIPT>

</HEAD>

<BODY>
	<div id="maindiv" class="maindiv">

		<div id="contentdiv1" class="contentdiv">1</div>
		<div id="contentdiv2" class="contentdiv">2</div>
		<div id="contentdiv3" class="contentdiv">3</div>
		<div id="contentdiv4" class="contentdiv">4</div>
		<div id="contentdiv5" class="contentdiv">5</div>
	
	</div>
	
	<div id="radiodiv" class="radiodiv">
		<input type="radio" id="radio1" οnmοuseenter="showScreen(1);" name="radio" value="1" checked="checked" />
		<br/><br/><input type="radio" id="radio2" οnmοuseenter="showScreen(2)" name="radio" value="2" />
		<br/><br/><input type="radio" id="radio3" οnmοuseenter="showScreen(3)" name="radio" value="3" />
		<br/><br/><input type="radio" id="radio4" οnmοuseenter="showScreen(4)" name="radio" value="4" />
		<br/><br/><input type="radio" id="radio5" οnmοuseenter="showScreen(5)" name="radio" value="5" />	
		<br/><br/><div id="informationdiv"></div>
	</div>

	
</BODY>

</HTML>

一粒马豆

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
javaScript实现HTML页面分屏滚动效果

javaScript实现HTML页面分屏滚动效果，非常简易，只需要使用onscroll事件和scrollTop属性就能控制。body{ margin:0px; padding:0px; color:#FFFFFF;}.maindiv{ position:absolute; width:100%; height:100%; overflow:auto;}.
复制链接

扫一扫