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

ajian

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

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

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

复制代码

jQuery全屏页面滚动导航切换效果.zip (36.31 KB, 下载次数: 36)

2021-3-3 18:00 上传

点击文件名下载附件
jQuery全屏页面滚动导航切换效果