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


Posted in Javascript onSeptember 19, 2017

本文实例讲述了原生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 相关文章推荐
JS 实现完美include载入实现代码
Aug 05 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
Vue表单实例代码
Sep 05 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 #Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 #Javascript
vue实现页面加载动画效果
Sep 19 #Javascript
深入理解Node.js中通用基础设计模式
Sep 19 #Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 #Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 #Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 #Javascript
You might like
中国的第一台收音机
2021/03/01 无线电
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
php通用防注入程序 推荐
2011/02/26 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
Python pickle模块用法实例分析
2015/05/27 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
简单的Python人脸识别系统
2020/07/14 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
考博自荐信
2013/10/25 职场文书
银行简历自我评价
2014/02/11 职场文书
化学教学随笔感言
2014/02/19 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
安全生产奖惩制度
2015/08/06 职场文书
python - asyncio异步编程
2021/04/06 Python
深入理解python协程
2021/06/15 Python
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python
Python matplotlib多个子图绘制整合
2022/04/13 Python