原生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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
webpack入门+react环境配置
Feb 08 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
在小程序中推送模板消息的实现方法
Jul 22 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 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
zend api扩展的php对象的autoload工具
2011/04/18 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
php框架知识点的整理和补充
2021/03/01 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
写好自荐信的几个要点
2013/12/26 职场文书
媒体宣传策划方案
2014/05/25 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python