首页>>导航菜单>>抽屉型的侧边栏(2020-06-10)

抽屉型的侧边栏

抽屉型的侧边栏
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="sidebar">  
  2.     <div class="headSculpture"> <img src="images/headSculpture.jpg" alt="">  
  3.       <p>红色少女</p>  
  4.     </div>  
  5.     <div class="option">  
  6.       <ul>  
  7.         <li><img src="images/home.png" alt="">  
  8.           <p>首页</p>  
  9.         </li>  
  10.         <li><img src="images/works.png" alt="">  
  11.           <p>我的作品</p>  
  12.         </li>  
  13.         <li><img src="images/release.png" alt="">  
  14.           <p>发布作品</p>  
  15.         </li>  
  16.         <li><img src="images/collection.png" alt="">  
  17.           <p>我的收藏</p>  
  18.         </li>  
  19.         <li><img src="images/setup.png" alt="">  
  20.           <p>设置</p>  
  21.         </li>  
  22.       </ul>  
  23.     </div>  
  24.   </div>  

 

JavaScript Code
  1. $(function () {  
  2.    // 侧边栏弹出  
  3.    $('button').click(function () {  
  4.       var left = $('#wrapper')[0].offsetLeft;  
  5.       if (left == 0) {  
  6.          $('#wrapper').offset({  
  7.             'left': 220  
  8.          });  
  9.          $(this).css('transform', 'rotate(450deg)');  
  10.          $('.headSculpture img').addClass('img');  
  11.          $('.headSculpture p').addClass('opacity');  
  12.          setTimeout(function () {  
  13.             $('.option ul>li').addClass('li');  
  14.          }, 600)  
  15.       } else {  
  16.          $('#wrapper').offset({  
  17.             'left': 0  
  18.          });  
  19.          $(this).css('transform', 'rotate(0deg)');  
  20.          setTimeout(function () {  
  21.             $('.headSculpture img').removeClass('img');  
  22.             $('.headSculpture p').removeClass('opacity');  
  23.             $('.option ul>li').removeClass('li');  
  24.          }, 300)  
  25.       }  
  26.    })  
  27.   
  28.    // 鼠标触碰改变img样式  
  29.    var SRC = [{  
  30.          src: 'images/home_1.png'  
  31.       },  
  32.       {  
  33.          src: 'images/works_1.png'  
  34.       },  
  35.       {  
  36.          src: 'images/release_1.png'  
  37.       },  
  38.       {  
  39.          src: 'images/collection_1.png'  
  40.       },  
  41.       {  
  42.          src: 'images/setup_1.png'  
  43.       },  
  44.       {  
  45.          src: 'images/home.png'  
  46.       },  
  47.       {  
  48.          src: 'images/works.png'  
  49.       },  
  50.       {  
  51.          src: 'images/release.png'  
  52.       },  
  53.       {  
  54.          src: 'images/collection.png'  
  55.       },  
  56.       {  
  57.          src: 'images/setup.png'  
  58.       },  
  59.    ]  
  60.    $('.option ul>li').mouseenter(function () {  
  61.       var index = $(this).index();  
  62.       $(this).children('img').attr('src', SRC[index].src);  
  63.    })  
  64.    $('.option ul>li').mouseleave(function () {  
  65.       var index = $(this).index();  
  66.       $(this).children('img').attr('src', SRC[index + 5].src);  
  67.    })  
  68. })  

 


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