jquery實現整屏翻屏效果：jquery.mousewheel（一）

2024-04-27 15:00:58

字體：大中小

來源：轉載

供稿：網友

實現整屏上下翻效果：
需加載的js

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

CSS樣式如下：

body{padding:0;margin:0; overflow:hidden }ul{list-style:none;}.content{width:100%;height100%;position:relative;top:0;}.div_01,.div_02,.div_03,.div_04{width:100%;margin:0 auto; text-align: center;}.div_01{background: #b20909;}.div_02{background: #0941b2;}.div_03{background: #2db209;}.div_04{background: #b29c09;}.left_fixed{position:fixed;width:15px; height:100px; left:100px;top:200px;z-index:999;}.left_fixed ul li{    background:#000;cursor:pointer;width:15px;height: 15px;    border-radius:15px;margin-bottom: 10px;}.left_fixed ul li.active{background:#fff;}

jquery代碼如下：

var page=0;//翻屏變量，初始第一屏var shakStaute = 0; //該變量作用是鼠標滑輪一直向下或者向上滑動時出現抖動現象$(function(){    var starttime = 0,        endtime = 0;    $("body").mousewheel(function(event, delta) {        starttime = new Date().getTime(); //記錄翻屏的初始時間        if (delta < 0&& page>=0 && page<=$(".content .divsame").length-2) {                     if (shakStaute>=0 &&(starttime == 0 || (endtime - starttime) <= -500)) { //在500ms內執行一次翻屏                shakStaute=1;                page++;                renderPage(page,true);  //翻屏函數                endtime = new Date().getTime();    //記錄翻屏的結束時間                            }        } else if (delta>0 && page>=1 && shakStaute==1 && (starttime == 0 || (endtime - starttime) <= -500)) {                page--;            renderPage(page,true);            endtime = new Date().getTime();                                }        });        var div_height=$(window).height();     $(".divsame").css({'height':div_height});    $(window).resize(function(){                div_height=$(window).height();        $(".divsame").css({'height':div_height});        $('.content').animate({top:-page*div_height }, 100);    });            $(".left_fixed ul li").on("click", function(){ //點擊小導航也執行翻屏        var index = $(this).index();        if(index>0){            shakStaute==1;        }        page = index;        renderPage(page, true);        $(".left_fixed ul li").removeClass("active");        $(this).addClass("active");        return false;    });        function renderPage(pageNumber, isScroll){            if (isScroll){        $('.content').animate({top:-pageNumber*div_height }, 'slow');        $(".left_fixed ul li").removeClass("active");        $(".left_fixed ul li").eq(pageNumber).addClass("active");    }          return;}})