使用原生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 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
详解vuex状态管理模式
Nov 01 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
详解JavaScript自定义函数
Jul 29 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
php5 mysql分页实例代码
2008/04/10 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
php-msf源码详解
2017/12/25 PHP
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python opencv调用笔记本摄像头
2019/08/28 Python
python实现人机五子棋
2020/03/25 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
python和JavaScript哪个容易上手
2020/06/23 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
python包的导入方式总结
2021/03/02 Python
小学生作文批改评语
2014/12/25 职场文书
企业年会祝酒词
2015/08/11 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS