用JQuery做一個(gè)分屏滾動(dòng)效果

平常會(huì)遇到這樣的需求，網(wǎng)站整屏滾動(dòng)效果。

效果如下圖，紅色為瀏覽器窗口，其他為每一個(gè)塊兒，當(dāng)我們使用鼠標(biāo)的滾輪的時(shí)候會(huì)上下切換。

到這里咱們還需要一個(gè)東西，鼠標(biāo)滾輪時(shí)間，還好有個(gè)插件幫咱們包裝好了鼠標(biāo)滾輪時(shí)間相關(guān)的參數(shù)

jquery.mousewheel.min.js

是個(gè)很出色的鼠標(biāo)滾輪事件的插件，今天咱們就是用這個(gè)來(lái)寫(xiě)一個(gè)效果吧。

第一步、引入必要的插件和庫(kù)

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

第二步、寫(xiě)好你的HTML和CSS

這里給body進(jìn)行了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">寫(xiě)一個(gè)</div>
<div class="mainlist mainlist4">整屏滾動(dòng)效果</div>
<div class="mainlist mainlist5">開(kāi)始！</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簡(jiǎn)單介紹

在mousewheel里面有個(gè)參數(shù)為：event.deltaY，這個(gè)主要是獲取鼠標(biāo)滾輪是網(wǎng)上滾動(dòng)還是往下滾動(dòng)的。

event.deltaY（1、-1）

-1：為鼠標(biāo)往下滾動(dòng)

1：位鼠標(biāo)網(wǎng)上滾輪

第四步、邏輯

因?yàn)樵蹅円话銥g覽網(wǎng)站的時(shí)候都是直接按住滾輪去操作，一般人的手指經(jīng)過(guò)一次滾輪所觸發(fā)的event為10左右，所以每一次觸發(fā)滾動(dòng)的數(shù)字為7比較合適。

每次觸發(fā)滾輪的時(shí)候都記一次數(shù)，當(dāng)觸發(fā)的數(shù)量達(dá)到7的時(shí)候，整屏滾動(dòng)就走一次，就這么簡(jiǎn)單。

下面直接貼代碼吧：

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

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

這次就做一個(gè)比較簡(jiǎn)單的《JQuery整屏滾動(dòng)效果》，當(dāng)然咱們也可以加個(gè)按鈕來(lái)上下滾動(dòng)，這個(gè)我會(huì)在往后的文章中寫(xiě)。