欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生javascript实现的全屏滚动功能示例

程序员文章站 2022-07-06 20:45:26
本文实例讲述了原生javascript实现的全屏滚动功能。分享给大家供大家参考,具体如下: 原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度...

本文实例讲述了原生javascript实现的全屏滚动功能。分享给大家供大家参考,具体如下:

原理:

1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度

2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题。

废话不多说,直接上代码

html代码:

<div id="wrap">
  <div id="main" style="top: 0;">
    <div class="content num1">
      <img src="https://www.bing.com/az/hprichbg/rb/singingringingtree_zh-cn12497946624_1920x1080.jpg" width="100%" height="100%">
    </div>
    <div class="content num2">
      <img src="https://www.bing.com/az/hprichbg/rb/shenandoahnp_zh-cn9981989975_1920x1080.jpg" width="100%" height="100%">
    </div>
    <div class="content num3">
      <img src="https://www.bing.com/az/hprichbg/rb/garesaintlazare_zh-cn6611772290_1920x1080.jpg" width="100%" height="100%">
    </div>
    <div class="content num4">
      <img src="https://www.bing.com/az/hprichbg/rb/friendshipsquare_zh-cn8820626148_1920x1080.jpg" width="100%" height="100%">
    </div>
  </div>
</div>

css代码:

#wrap{overflow: hidden;width: 100%;}
#main{top: 0;position: relative;}
.content{width: 100%;margin: 0;height: 100%;}
.num1{background: #e8e8e8;}
.num2{background: pink;}
.num3{background: yellow;}
.num4{background: orange;}

js代码:

<script type="text/javascript">
  var wrap = document.getelementbyid("wrap");
  var divheight = window.innerheight;
  wrap.style.height = divheight + "px";
  var content = $(".content");//懒得写获取类的原生js代码了,直接用了jquery,=。=
  content.height(divheight);
  var starttime = 0, //开始翻屏时间
    endtime = 0,
    now = 0;
  if ((navigator.useragent.tolowercase().indexof("firefox")!=-1)){
    //for firefox;
    document.addeventlistener("dommousescroll",scrollfun,false);
  }
  else if (document.addeventlistener) {
    document.addeventlistener("mousewheel",scrollfun,false);
  }
  else if (document.attachevent) {
    document.attachevent("onmousewheel",scrollfun);
  }
  else{
    document.onmousewheel = scrollfun;
  }
  //滚动事件处理函数
  function scrollfun(event){
      starttime = new date().gettime();
      var delta = event.detail || (-event.wheeldelta);
      if ((endtime - starttime) < -1000) {
        //1秒内执行一次翻页
        if (delta > 0 && parseint(main.style.top) > -divheight * ( content.length - 1)) { //向下翻页
          now += divheight ;
          turnpage(now);
        }
        if (delta < 0 && parseint(main.style.top) < 0) { //向上翻页
          now -= divheight ;
          turnpage(now);
        }
        endtime = new date().gettime();
      }
      else{
        event.preventdefault();
      }
  }
  //翻页函数
  function turnpage(now){
    $("#main").animate({top:(-now+'px')},1000);
    //懒得写动画代码了,直接用了jquery,=。=
  }
</script>

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

希望本文所述对大家javascript程序设计有所帮助。