您的位置：首页 > Web前端 > JavaScript

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

2016-05-18 20:18 696 查看

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.onresize=function(){
windowHeight=document.documentElement.clientHeight;
}

window.onload=function(){

//获取浏览器窗口高度
windowHeight=document.documentElement.clientHeight;

//主显DIV滚动事件处理
$("maindiv").onscroll=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" onmouseenter="showScreen(1);" name="radio" value="1" checked="checked" />
<br/><br/><input type="radio" id="radio2" onmouseenter="showScreen(2)" name="radio" value="2" />
<br/><br/><input type="radio" id="radio3" onmouseenter="showScreen(3)" name="radio" value="3" />
<br/><br/><input type="radio" id="radio4" onmouseenter="showScreen(4)" name="radio" value="4" />
<br/><br/><input type="radio" id="radio5" onmouseenter="showScreen(5)" name="radio" value="5" />
<br/><br/><div id="informationdiv"></div>
</div>

</BODY>

</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript html css 分屏滚动

相关文章推荐

新的分享

章节导航