原生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 相关文章推荐
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
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
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
JS实现使用POST方式发送请求
2019/08/30 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
使用Python对Access读写操作
2017/03/30 Python
Mac 上切换Python多版本
2017/06/17 Python
Python实现购物车购物小程序
2018/04/18 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
资料员岗位职责
2013/11/17 职场文书
心理健康教育心得体会
2013/12/29 职场文书
自考生自我评价分享
2014/01/18 职场文书
销售员岗位职责范本
2014/02/03 职场文书
便利店促销方案
2014/02/20 职场文书
公司寄语大全
2014/04/10 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
暑期家教宣传单
2015/07/14 职场文书
聘任合同书
2015/09/21 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
浅析Django接口版本控制
2021/06/26 Python
python通过新建环境安装tfx的问题
2022/05/20 Python