一、滾輪事件

當用戶通過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時，就會觸發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实现滚轮翻页效果的示例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。