jQuery实现王者荣耀手风琴效果

效果

思路分析:

1.鼠标经过某个小li 有两步操作：
2.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
3.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出

​代码实现略。(详情参考源代码)

 
 

 
  * {
   margin: 0;
   padding: 0;
  }
  
  img {
   display: block;
  }
  
  ul {
   list-style: none;
  }
  
  .king {
   width: 852px;
   margin: 100px auto;
   background: url(images/bg.png) no-repeat;
   overflow: hidden;
   padding: 10px;
  }
  
  .king ul {
   overflow: hidden;
  }
  
  .king li {
   position: relative;
   float: left;
   width: 69px;
   height: 69px;
   margin-right: 10px;
  }
  
  .king li.current {
   width: 224px;
  }
  
  .king li.current .big {
   display: block;
  }
  
  .king li.current .small {
   display: none;
  }
  
  .big {
   width: 224px;
   display: none;
  }
  
  .small {
   position: absolute;
   top: 0;
   left: 0;
   width: 69px;
   height: 69px;
   border-radius: 5px;
  }
 




 
 
 
  

   

    
     
     
    
   
   

    
     
     
    
   
   

    
     
     
    
   
   

    
     
     
    
   
   

    
     
     
    
   
   

    
     
     
    
   
   

    
     
     
    
   
  

 

以上就是本次介绍的案例代码全部内容，如果大家有不同写法和意见可以联系小编。