跳到主要内容

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

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>
 

————————————————
版权声明:本文为CSDN博主「一粒马豆」的原创文章,原文链接:https://blog.csdn.net/maillibin/article/details/51446983

 

返回顶部