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

本文实例讲述了原生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程序设计有所帮助。

# javascript # 全屏滚动 # JavaScript全屏和退出全屏事件总结（附代码） # fullPage.js和CSS3实现全屏滚动效果 # 原生js实现类似fullpage的单页/全屏滚动 # Javascript 实现全屏滚动实例代码 # JS实现全屏的四种写法 # jQuery插件fullPage.js实现全屏滚动效果 # JS 全屏和退出全屏详解及实例代码 # 全屏滚动插件fullPage.js使用实例解析 # 浅谈javascript控制HTML5的全屏操控 # 浏览器兼容的问题 # js实现各浏览器全屏代码实例 # 翻页 # 用了 # 相关内容 # 鼠标 # 遍历 # 感兴趣 # 数据结构 # 给大家 # 多说 # 更多关于 # 全屏 # 即为 # 所述 # 程序设计 # 讲述了 # www # https # src # hprichbg # az

返回目录在线咨询

上一篇：如何利用客户反馈改善关键词策略_SEO优化教程
下一篇：python中的filter函数功能是什么？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求