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

前端开发作者： 2024-08-20 19:00:01

实现整屏上下翻效果：需加载的js css样式如下： jquery代码如下：同时也是实时响应的。需要demo猛点该文字，百度云盘下载

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

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;}

var page=0;//翻屏变量，初始第一屏
var shakStaute = 0; 该变量作用是鼠标滑轮一直向下或者向上滑动时出现抖动现象
$(function(){

    var starttime = 0,endtime = 0;
    $("body").mousewheel((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,1)">true);
            endtime = new Date().getTime();                        
        }    

    });
    
    var div_height=$(window).height(); 

    $(".divsame").css({'height':div_height});

    $(window).resize((){
        
        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,1)">);
        $(".left_fixed ul li").removeClass("active");
        $(this).addClass("active");
        return false;
    });
    
     renderPage(pageNumber,isScroll){    
    
    if (isScroll){
        $('.content').animate({top:-pageNumber*div_height },'slow');
        $(".left_fixed ul li").eq(pageNumber).addClass("active");
    }     
     return;
}

})