使用原生JS实现滚轮翻页效果的示例代码


Posted in Javascript onMay 31, 2020

一、滚轮事件

当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 “mousewheel” 事件,而 Firefox 3.5+ 中提供了一个等同的事件:”DOMMouseScroll”。与mousewheel事件对应的event对象中我们还会用到另一个特殊属性—wheelDelta属性。

1、“mousewheel” 事件中的 “event.wheelDelta” 属性值:返回的值,如果是正值说明滚轮是向上滚动,如果是负值说明滚轮是向下滚动;返回的值,均为 120 的倍数,即:幅度大小 = 返回的值 / 120。

2、“DOMMouseScroll” 事件中的 “event.detail” 属性值:返回的值,如果是负值说明滚轮是向上滚动(与 “event.wheelDelta” 正好相反),如果是正值说明滚轮是向下滚动;返回的值,均为 3 的倍数,即:幅度大小 = 返回的值 / 3。

二、实现效果

使用原生JS实现滚轮翻页效果的示例代码 

三、源代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      overflow: hidden;
    }
    .container {
      transition: .5s;
    }
    .item {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item" style="background-color: rgb(255,255,0)"></div>
    <div class="item" style="background-color: rgb(255, 145, 0)"></div>
    <div class="item" style="background-color: rgb(0, 17, 255)"></div>
    <div class="item" style="background-color: rgb(0, 255, 136)"></div>
  </div>
  <script src="sun.js"></script>
  <script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'></script>
  <script>
    $(() => {
      let i = 0;
      let move = sun.throttle(e => {
        if(e.wheelDelta < 0) {
          if( i === $(".item").length - 1) return ;
          i++;
        } else {
          if( i === 0) return;
          i--;
        }
        $(".container").css("transform",`translateY(-${i*100}vh)`);
      },500);
      window.onmousewheel = move;
    })
  </script>
</body>
</html>

其中用到了节流函数 throttle() ,函数代码如下:

function throttle(fn,wait) {
    let endTime = 0;
    return function() {
      if(new Date() - endTime < wait) return;
      fn.apply(this,arguments);
      endTime = new Date();
    }
  },

到此这篇关于使用原生JS实现滚轮翻页效果的示例代码的文章就介绍到这了,更多相关JS滚轮翻页内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
JS实现拼图游戏
Jan 29 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 #Javascript
公众号SVG动画交互实战代码
May 31 #Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 #Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 #Javascript
详解Typescript 内置的模块导入兼容方式
May 31 #Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 #Javascript
JQuery获得内容和属性方法解析
May 30 #jQuery
You might like
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
javascript offsetX与layerX区别
2010/03/12 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JS继承用法实例分析
2015/02/05 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
python利用装饰器进行运算的实例分析
2015/08/04 Python
python使用opencv进行人脸识别
2017/04/07 Python
python运行其他程序的实现方法
2017/07/14 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Django框架封装外部函数示例
2019/05/28 Python
Python随机数函数代码实例解析
2020/02/09 Python
如何利用Python 进行边缘检测
2020/10/14 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
高中毕业生个人自我鉴定
2013/11/24 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
个人自我剖析材料
2014/02/07 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
基于Redis的List实现特价商品列表功能
2021/08/30 Redis