jQuery全屏页面滚动导航切换效果-刺猬源码

jQuery全屏页面滚动导航切换效果

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

js代码

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.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>
VIP免费 永久VIP免费当前隐藏内容需要支付1金币
已有0人支付