jquery.mousewheel实现整屏翻屏效果

前端之家收集整理的这篇文章主要介绍了jquery.mousewheel实现整屏翻屏效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

实现整屏上下翻效果: 需加载的js

  • jquery 代码如下(index.js):

    $(function(){

    var starttime = 0,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_04").css({'height':div_height});

    $(window).resize(function(){

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

    $(".div_01,.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;
    });
    })

    原文链接:https://www.f2er.com/jquery/52586.html

    猜你在找的jQuery相关文章