jquery实现整屏翻屏效果

最新推荐文章于 2023-02-27 11:59:22 发布

a0100034930

最新推荐文章于 2023-02-27 11:59:22 发布

阅读量4.8k

点赞数

本文链接：https://blog.csdn.net/a0100034930/article/details/42422411

版权

实现整屏上下翻效果：
静态html代码：
注意头部加载的js，jquery库，mousewheel.js已经实现的index.js

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<style>
    body{padding:0;margin:0; overflow:hidden }
    ul{list-style:none;}
    .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;}
</style>
</head>
<body>
    <div class="content">
        <div class="div_01"></div>
        <div class="div_02"></div>
        <div class="div_03"></div>
        <div class="div_04"></div>
    </div>
    <div class="left_fixed">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

jquery 代码如下(index.js)：

var i=0;//翻屏变量，初始第一屏
var s = 0; //该变量作用是鼠标滑轮一直向下或者向上滑动时出现抖动现象

$(function(){

    var starttime = 0,
        endtime = 0;
    $("body").mousewheel(function(event, delta) {

        starttime = new Date().getTime(); //记录翻屏的初始时间

        if (delta < 0&& i>=0 && i<=2) { 

            if (s>=0&&(starttime == 0 || (endtime - starttime) <= -500)) { //在500ms内执行一次翻屏
                s=1;
                i++;
                renderPage(i,true);  //翻屏函数
                endtime = new Date().getTime(); //记录翻屏的结束时间
            }
        } else if (delta > 0&& i>=1&&s==1&& (starttime == 0 || (endtime - starttime) <= -500)) {    
            i--;
            //console.log(i);
            renderPage(i,true);
            endtime = new Date().getTime();                     
        }   

    });

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

    $(".div_01,.div_02,.div_03,.div_04").css({'height':div_height});

    $(window).resize(function(){

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

    $(".div_01,.div_02,.div_03,.div_04").css({'height':div_height});

    });

    function renderPage(pageNumber, isScroll){  
        if (isScroll){
                $('body, html').animate({scrollTop:pageNumber*div_height }, 'slow');
                $(".left_fixed ul li").removeClass("active");
                $(".left_fixed ul li").eq(pageNumber).addClass("active");
            }

         return;
        }

    $(".left_fixed ul li").on("click", function(){ //点击小导航也执行翻屏
        var index = $(this).index();
        renderPage(index, true);
        $(".left_fixed ul li").removeClass("active");
        $(this).addClass("active");
        return false;
    });
})