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>

本文由零壹源码整理自网络,如本站发布的内容若侵犯到您的权益,请邮件联系 1115211524@qq.com  删除,我们将及时处理!

==========================================

本站资源仅供学习和交流使用,本站对其所列之资源不拥有版权,版权归资源原作者所有,请在下载后24小时之内自觉删除。

若作商业用途,请购买正版及查阅最新授权相关说明,由于未及时购买和付费发生的侵权行为,与本站无关。

本站大部分资源及其所有相关信息均来自网络搜集或网友提供,不保证其完整性以及安全性,对信息的准确性不提供任何担保,亦不承担任何责任。

分享到:
赞(0)

Hi, 如果你对此资源有疑问,可以跟我联系哦!

联系客服