用JQuery做一個分屏滾動效果

平常會遇到這樣的需求，網站整屏滾動效果。

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

到這里咱們還需要一個東西，鼠標滾輪時間，還好有個插件幫咱們包裝好了鼠標滾輪時間相關的參數

jquery.mousewheel.min.js

是個很出色的鼠標滾輪事件的插件，今天咱們就是用這個來寫一個效果吧。

第一步、引入必要的插件和庫

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>

第二步、寫好你的HTML和CSS

這里給body進行了position:relative的定位，然后再給id=main定位position:absolute，然后使用JQ控制

<div id="main">
<div class="mainlist mainlist0">青格勒</div>（www.gendan5.com
）
<div class="mainlist mainlist1">前端博客</div>
<div class="mainlist mainlist2">cenggel.com</div>
<div class="mainlist mainlist3">寫一個</div>
<div class="mainlist mainlist4">整屏滾動效果</div>
<div class="mainlist mainlist5">開始！</div>
</div>
<style>
body{ position:relative; overflow:hidden; height:100%;}
#main{ position:absolute; top:0; left:0; width:100%; font-size:120px; color:#000; text-align:center; line-height:100%;}
.mainlist0{ background:#f6303d;}
.mainlist1{ background:#515151;}
.mainlist2{ background:#009f95;}
.mainlist3{ background:#333333;}
.mainlist4{ background:rosybrown;}
.mainlist5{ background:palegoldenrod;}
</style>

第三部、mousewheel.js簡單介紹

在mousewheel里面有個參數為：event.deltaY，這個主要是獲取鼠標滾輪是網上滾動還是往下滾動的。

event.deltaY（1、-1）

-1：為鼠標往下滾動

1：位鼠標網上滾輪

第四步、邏輯

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

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

下面直接貼代碼吧：

<script type="text/javascript">
var winup = 0,//向上觸發次數
windown = 0,//向下觸發次數
num = 0;//當前頁面位置
function fun1(){
//獲取屏幕高度
winhei = $(window).height();
$('.mainlist,body').height(winhei)
}
fun1();
$(window).resize(function(){
//每當屏幕大小改變時計算一次
fun1();
});
$('#main').on('mousewheel', function(event) {
//鼠標滾輪觸發
var mouseNum = event.deltaY;

    if (mouseNum == 1){
        //向上的時候觸發
        winup++;
        windown = 0;
        if(winup == 7){
            winup=0;
            if (num > 0){
                num--;
                $('#main').stop(false,true).animate({'top': -(winhei*num) + 'px'},500);
            };
        };
    }else{
        //向下的時候觸發
        windown++;
        winup=0;
        if(windown == 7){
            windown=0;
            if (num<($('.mainlist').length - 1)){
                num++;
                $('#main').stop(false,true).animate({'top': -(winhei*num) + 'px'},500);
            };
        };

    };
});

</script>

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