一、滾輪事件

當用戶通過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時，就會觸發(fā)mousewheel事件，這個事件就是實現(xiàn)全屏切換效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中，都提供了 “mousewheel” 事件，而 Firefox 3.5+ 中提供了一個等同的事件：”DOMMouseScroll”。與mousewheel事件對應的event對象中我們還會用到另一個特殊屬性—wheelDelta屬性。

1、“mousewheel” 事件中的 “event.wheelDelta” 屬性值：返回的值，如果是正值說明滾輪是向上滾動，如果是負值說明滾輪是向下滾動；返回的值，均為 120 的倍數(shù)，即：幅度大小 = 返回的值 / 120。

2、“DOMMouseScroll” 事件中的 “event.detail” 屬性值：返回的值，如果是負值說明滾輪是向上滾動(與 “event.wheelDelta” 正好相反)，如果是正值說明滾輪是向下滾動；返回的值，均為 3 的倍數(shù)，即：幅度大小 = 返回的值 / 3。

二、實現(xiàn)效果

三、源代碼

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;

})

其中用到了節(jié)流函數(shù) throttle() ，函數(shù)代碼如下：

function throttle(fn,wait) {

let endTime = 0;

return function() {

if(new Date() - endTime < wait) return;

fn.apply(this,arguments);

endTime = new Date();

}

},

到此這篇關于使用原生JS實現(xiàn)滾輪翻頁效果的示例代碼的文章就介紹到這了,更多相關JS滾輪翻頁內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

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