原生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拦截alert对话框另类应用
Jan 16 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 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生成EXCEL的东东
2006/10/09 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
8个必备的PHP功能开发
2015/10/02 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
JS实现简单打字测试
2020/06/24 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
python3实现名片管理系统
2020/11/29 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python批量处理txt文件的实例代码
2020/01/13 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
几个Shell Script面试题
2012/08/31 面试题
社会实践的活动方案
2014/08/22 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
Android studio 简单计算器的编写
2022/05/20 Java/Android