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

一、滚轮事件

当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时，就会触发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。

二、实现效果

三、源代码

Document

* {

margin: 0;

padding: 0;

}

body {

overflow: hidden;

}

.container {

transition: .5s;

}

.item {

width: 100vw;

height: 100vh;

}

$(() => {

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;

})

其中用到了节流函数 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滚轮翻页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码相关推荐

原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
用原生JS实现3D轮播效果
用原生JS实现3D轮播效果实现思路: 先实现无缝轮播效果添加3D效果完善代码增加自动轮播效果效果如下: 视图中显示3张图片,并通过CSS的透视和旋转实现3D效果,当无任何操作时,图片自动循环 ...
史上最简单的原生JS实现轮播图效果
原生JS实现轮播图效果上篇文章我们说到了怎样利用原生JS实现Tab切换的效果,现在我们来说一下Tab切换的"升级版".如何利用原生JS实现轮播图效果.如图: HTML代码: &l ...
animate用法 js原生_原生js实现jq的animate效果.js
原生js实现jq的animate效果(有一定bug未修复,有时间补上) //原生js实现jq的animate效果 /** *@param obj 执行动画的元素 *@param css JSON数值对 ...
图书浏览界面html代码,javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程在这里推荐turn.js 网上的turn.js 有api 不过是英文的很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn ...
js实现html图片翻页效果,原生JS实现图片翻书效果
JS实现图片翻书效果-懒人图库 #center { LEFT: 50%; POSITION: absolute; TOP: 50% } #DHTMLBOOK { BACKGROUND: #000; L ...
原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
原生js实现tab栏切换效果
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注小歌谣一起学习前后端知识运行效果首先我们来看一下原生js实现的效果下面就开始直接上代码了 index.html <!DOCTYPE h ...

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

html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码相关推荐

最新文章

热门文章