jquery實現全屏滾動_jquery

一.全屏滾動的原理
1.js動態獲取屏幕的高度。

獲取屏幕的高度，設置每一屏幕的高度。

2.監聽mousewheel事件。

監聽mousewheel事件，并判斷滾輪的方向，向上或向下滾動一屏。

二.jQuery插件fullpages介紹
fullPage.js 是一個基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網站，主要功能有：

使用方法

1、引入文件

每個 section 代表一屏，默認顯示“第一屏”，如果要指定加載頁面時顯示的“屏幕”，可以在對應的 section 加上class=”active”，如：

第三屏

同時，可以在 section 內加入 slide(左右滑動)，如：

 第一屏
 第二屏
 
 第三屏的第一屏
 第三屏的第二屏
 第三屏的第三屏
 第三屏的第四屏
 
 第四屏

3、JavaScript

可以進行跟多的配置：

三.動手寫全屏滾動
這里主要介紹監聽mousewheel事件及滾動。

由于mousewheel事件的兼容性，引用jquery-mousewheel插件來監聽滾輪事件。

通過參數delta可以獲取鼠標滾輪的方向和速度（舊版本需要傳delta參數，新版本不需要，直接用event取）。如果delta的值是負的，那么滾輪就是向下滾動，正的就是向上。

可以根據需求使用fullpages實現全屏滾動（上下，左右），也可以使用jquery-mousewheel定制不同高度的全屏滾動。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com