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

2020年4月25日
EBRP研究
网站建设
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
Post Views: 229
网站结构设计网站配置
分享给他人

你可能还感兴趣：
