用JQuery做乙個分屏滾動效果

2021-09-27 05:01:45 字數 793 閱讀 1357

平常會遇到這樣的需求,**整屏滾動效果。

效果如下圖,紅色為瀏覽器視窗,其他為每乙個塊兒,當我們使用滑鼠的滾輪的時候會上下切換。

到這裡咱們還需要乙個東西,滑鼠滾輪時間,還好有個外掛程式幫咱們包裝好了滑鼠滾輪時間相關的引數

jquery.mousewheel.min.js

是個很出色的滑鼠滾輪事件的外掛程式,今天咱們就是用這個來寫乙個效果吧。

第一步、引入必要的外掛程式和庫

第二步、寫好你的html和css

這裡給body進行了position:relative的定位,然後再給id=main定位position:absolute,然後使用jq控制

青格勒(www.gendan5.com

)前端部落格

cenggel.com

寫乙個整屏滾動效果

開始!

第三部、mousewheel.js簡單介紹

在mousewheel裡面有個引數為:event.deltay,這個主要是獲取滑鼠滾輪是網上滾動還是往下滾動的。

event.deltay(1、-1)

-1:為滑鼠往下滾動

1:位滑鼠網上滾輪

第四步、邏輯

因為咱們一般瀏覽**的時候都是直接按住滾輪去操作,一般人的手指經過一次滾輪所觸發的event為10左右,所以每一次觸發滾動的數字為7比較合適。

每次觸發滾輪的時候都記一次數,當觸發的數量達到7的時候,整屏滾動就走一次,就這麼簡單。

下面直接貼**吧:

這次就做乙個比較簡單的《jquery整屏滾動效果》,當然咱們也可以加個按鈕來上下滾動,這個我會在往後的文章中寫。

用rhino做乙個地球

利用全球的地形圖,根據灰度生成高度不一的柱體 將球的uv展開 柱體鋪滿uv,使用曲面流動到球上 準備一張地形圖,這裡隨便找了乙個全球地形圖,有灰度區分高度的最好,顏色的區分的相對的高程不夠真實。開啟rhino,繪製乙個球,將球的uv展開。根據uv的大小繪製乙個面,用於在grasshopper中拾取作...

用html做乙個目錄 用555做乙個高壓發生器

用555做乙個高壓發生器。如圖,ne555為脈衝發生晶元 以此晶元外圍電路為準,頻率約1.7khz,占空比 10 q2為n溝道場效電晶體,q1為npn三極體,t1為高壓線圈。如圖所示 晶元為ne555,為脈衝發生晶元,脈衝頻率由c1 r1和r2來調整。開關管q2為n溝道場效電晶體。r3為場效電晶體的...

用C 做乙個懸浮視窗

用c 做乙個懸浮視窗 含三種移動無標題窗體的辦法 2006年08月24日 星期四 16 36 今天看幾個c 原始碼,再到愚翁專欄 第一步 建立乙個窗體,設定其屬性 this.formborderstyle system.windows.forms.formborderstyle.none this....