用JQuery做一個分屏滾動效果-創(chuàng)新互聯(lián)

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

站在用戶的角度思考問題，與客戶深入溝通，找到桐梓網(wǎng)站設(shè)計與桐梓網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、虛擬主機、企業(yè)郵箱。業(yè)務(wù)覆蓋桐梓地區(qū)。

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

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

jquery.mousewheel.min.js

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

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

<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里面有個參數(shù)為：event.deltaY，這個主要是獲取鼠標(biāo)滾輪是網(wǎng)上滾動還是往下滾動的。

event.deltaY（1、-1）

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

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

第四步、邏輯

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

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

下面直接貼代碼吧：

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

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：用JQuery做一個分屏滾動效果-創(chuàng)新互聯(lián)
標(biāo)題URL：http://bm7419.com/article24/gjdce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、域名注冊、做網(wǎng)站、App設(shè)計、電子商務(wù)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司