首页>>导航菜单>>SVG移动端图标导航页面切换(2019-09-02)

SVG移动端图标导航页面切换

SVG移动端图标导航页面切换
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="phone">  
  2.   <div class="page">Home</div>  
  3.   <nav>  
  4.     <div class="wave-wrap">  
  5.       <svg version="1.1" id="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 119 26">  
  6.           <path class="path" d="M120.8,26C98.1,26,86.4,0,60.4,0C35.9,0,21.1,26,0.5,26H120.8z">  
  7.         </svg>  
  8.     </div>  
  9.     <ul class="list-wrap">  
  10.       <li data-color="#eccc68" title="Home">  
  11.         <i class="icon ion-ios-home"></i>  
  12.       </li>  
  13.       <li data-color="#ff6b81" title="Profile">  
  14.         <i class="icon ion-ios-person"></i>  
  15.       </li>  
  16.       <li data-color="#7bed9f" title="Get a beer!">  
  17.         <i class="icon ion-ios-beer"></i>  
  18.       </li>  
  19.       <li data-color="#70a1ff" title="Files">  
  20.         <i class="icon ion-ios-folder-open"></i>  
  21.       </li>  
  22.       <li data-color="#dfe4ea" title="Settings">  
  23.         <i class="icon ion-ios-settings"></i>  
  24.       </li>  
  25.     </ul>  
  26.   </nav>  
  27. </div>  

 

JavaScript Code
  1. // set the first nav item as active  
  2. var dis = $(".list-wrap li").eq(0);  
  3.   
  4. // align the wave  
  5. align(dis);  
  6.   
  7. // align the wave on click  
  8. $(".list-wrap li").click(function(){  
  9.   dis = $(this);  
  10.     
  11.   align(dis);  
  12. });  
  13.   
  14. function align(dis){  
  15.     
  16.   // get index of item  
  17.   var index = dis.index() + 1;  
  18.     
  19.   // add active class to the new item  
  20.   $(".list-wrap li").removeClass("active");  
  21.   dis.delay(100).queue(function() {  
  22.     dis.addClass('active').dequeue();  
  23.   });  
  24.     
  25.   // move the wave  
  26.   var left = index * 80 - 98;  
  27.     
  28.   $("#wave").css('left', left);  
  29.     
  30.   // ▼ this is not necessary for the navigation ▼  
  31.     
  32.   // set the background color  
  33.   var color = dis.data('color');  
  34.   $("body").css('background', color);  
  35.     
  36.   // set the text  
  37.   $(".page").text(dis.attr("title"));  
  38. }  

 


原文地址:http://www.freejs.net/article_daohangcaidan_774.html