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

2019-11-19 15:23:14

字体：大中小

来源：转载

供稿：网友

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

上一篇：在Debian（Raspberry Pi）树莓派上安装NodeJS的教程详解

下一篇：Vue结合SignalR实现前后端实时消息同步