使用原生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 相关文章推荐
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
原生JS实现幻灯片
Feb 22 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
Vue数字输入框组件的使用方法
Oct 19 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实现留言板功能(会话控制)
2017/05/23 PHP
关于JS管理作用域的问题
2013/04/10 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
python如何实现视频转代码视频
2019/06/17 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
员工培训心得体会
2013/12/30 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
基于Python实现射击小游戏的制作
2022/04/06 Python
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL