jquery实现整屏翻屏效果：jquery.mousewheel（一）

实现整屏上下翻效果：
需加载的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;
}

})

同时也是实时响应的。
需要demo猛点该文字，百度云盘下载

作者：风雨后见彩虹

出处：http://www.cnblogs.com/moqiutao/

如果您觉得本文对您的学习有所帮助，请多支持与鼓励。