搜索附件  
自丢网 附件中心 模板下载 网页特效 菜单导航代码 jQuery全屏页面滚动导航切换效果.zip

热门下载

左侧广告
版权所有:自丢网
For 2020-2050 © zidiu.com

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

 

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


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

  1. js代码

  2. <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
  3. <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
  4. <script type="text/javascript">
  5. $(function() {
  6.   var nowpage=0;
  7.   var lock=true;
  8.   function donghua(){
  9.     $('.containter').animate({'top': -100*nowpage+'%'}, 500);
  10.     $('.page').eq(nowpage).addClass('current').siblings().removeClass('current');
  11.     $('.dian ul li').eq(nowpage).addClass('da').siblings().removeClass('da');
  12.     $('.nav ul li').eq(nowpage).addClass('bg').siblings().removeClass('bg');
  13.   }
  14.   $(document).mousewheel(function (event,delta) {
  15.     if(lock){
  16.       nowpage=nowpage-delta;
  17.       if(nowpage<0){nowpage=0;}
  18.       if(nowpage>4){nowpage=4;}
  19.        donghua();
  20.       lock=false;
  21.       setTimeout(function  () {
  22.         // body...
  23.         lock=true;
  24.       },1000);
  25.     }
  26.   })
  27.   $('.nav ul li').click(function(event) {
  28.     nowpage=$(this).index();
  29.     if(nowpage<=4){donghua();}
  30.   });
  31.   $('.dian ul li').click(function(event) {
  32.     nowpage=$(this).index();
  33.     donghua();
  34.   });
  35. });
  36. </script>
复制代码