使用原生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 相关文章推荐
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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
PHP日期处理函数 整型日期格式
2011/01/12 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
python多线程http下载实现示例
2013/12/30 Python
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
简单学习Python time模块
2016/04/29 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
教师实习自我鉴定
2013/12/14 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
座谈会主持词
2014/03/20 职场文书
初中新生军训方案
2014/05/13 职场文书
审计班子对照检查材料
2014/08/27 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
三下乡活动心得体会
2016/01/23 职场文书
社区结对共建协议书
2016/03/23 职场文书
Golang 切片(Slice)实现增删改查
2022/04/22 Golang