原生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下申明对象的几种方法小结
Oct 02 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 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
PHP中使用array函数新建一个数组
2015/11/19 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
python实现堆栈与队列的方法
2015/01/15 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
python简单区块链模拟详解
2019/07/03 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
医生自荐信
2013/10/11 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
情人节活动策划方案
2014/02/27 职场文书
垂直极限观后感
2015/06/08 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
法定授权委托证明书
2015/06/18 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫