本文由 资源共享网 – admin 发布，转载请注明出处，如有问题请联系我们！jQuery全屏页面滚动导航切换效果

一款非常大气的全屏网站切换特效，点击顶部固定导航菜单链接自动切换到对应内容的jQuery全屏页面滚动导航切换效果。

js代码

<script type="text/javascript" src="https://img.x22t.com/file/2020/04/25/f082cdf786a44b5b0c1ed84329cf2c828585.js"></script>
<script type="text/javascript" src="https://img.x22t.com/file/2020/04/25/0957e96238d6f19a51a3d9ffd1f09d3c5809.js"></script>
<script type="text/javascript">
$(function() {
  var nowpage=0;
  var lock=true;
  function donghua(){
    $(".containter").animate({"top": -100*nowpage+"%"}, 500);
    $(".page").eq(nowpage).addClass("current").siblings().removeClass("current");
    $(".dian ul li").eq(nowpage).addClass("da").siblings().removeClass("da");
    $(".nav ul li").eq(nowpage).addClass("bg").siblings().removeClass("bg");
  }
  $(document).mousewheel(function (event,delta) {
    if(lock){ 
      nowpage=nowpage-delta;
      if(nowpage<0){nowpage=0;}
      if(nowpage>4){nowpage=4;}
       donghua();
      lock=false;
      setTimeout(function  () {
        // body...
        lock=true;
      },1000);
    }
  })
  $(".nav ul li").click(function(event) {
    nowpage=$(this).index();
    if(nowpage<=4){donghua();}
  });
  $(".dian ul li").click(function(event) {
    nowpage=$(this).index();
    donghua();
  });
});
</script>