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

更新时间：2020年01月17日 08:34:46 作者：杰帅666

这篇文章主要介绍了jQuery实现王者荣耀手风琴效果的代码内容，需要的朋友们可以学习下。

效果

思路分析:

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

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

<!doctype html>
<html>

<head>
 <meta charset="utf-8">
 <title>手风琴案例</title>

 <style type="text/css">
  * {
   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;
  }
 </style>

</head>

<body>
 <script src="js/jquery.min.js"></script>
 <script type="text/javascript">
  $(function() {
   // 鼠标经过某个小li 有两步操作：
   $(".king li").mouseenter(function() {
    // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
    // 不能写成find('.small').stop().fadeOut().siblings().find('.big').stop
    $(this).stop().animate({
     width: 224
    }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
    // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
    $(this).siblings("li").stop().animate({
     width: 69
    }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
   })
  });
 </script>
 <div class="king">
  <ul>
   <li class="current">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/m1.jpg" alt="" class="small">
     <img src="images/m.png" alt="" class="big">
    </a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/l1.jpg" alt="" class="small">
     <img src="images/l.png" alt="" class="big">
    </a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/c1.jpg" alt="" class="small">
     <img src="images/c.png" alt="" class="big">
    </a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/w1.jpg" alt="" class="small">
     <img src="images/w.png" alt="" class="big">
    </a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/z1.jpg" alt="" class="small">
     <img src="images/z.png" alt="" class="big">
    </a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/h1.jpg" alt="" class="small">
     <img src="images/h.png" alt="" class="big">
    </a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/t1.jpg" alt="" class="small">
     <img src="images/t.png" alt="" class="big">
    </a>
   </li>
  </ul>

 </div>
</body>

</html>

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

您可能感兴趣的文章:

jQuery + html + css 实现王者荣耀官网首页效果附实例代码

jQuery中复合选择器简单用法示例
这篇文章主要介绍了jQuery中复合选择器简单用法,结合实例形式分析了jQuery中复合选择器的概念、功能、应用场景及相关使用方法,需要的朋友可以参考下
2018-03-03
jQuery之动画ajax事件(实例讲解)
下面小编就为大家带来一篇jQuery之动画ajax事件(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
完美JQuery图片切换效果的简单实现
下面小编就为大家带来一篇完美JQuery图片切换效果的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
jQuery结合CSS制作漂亮的select下拉菜单
对于我来说，标准的HTML元素（Select）已经让我感到讨厌。它不能够正常的在IE浏览器上显示。还有一点就是他并不仅仅包含简单的文本。本实例将完全摒弃select元素，通过JQuery和CSS来构建DropDown元素。
2015-05-05
jQuery 操作下拉列表框实现代码
操作下拉列表框的jquery代码，方便学习jquery的朋友。
2010-02-02
JQuery 无废话系列教程(一) jquery入门 [推荐]
贝壳(就是本文作者了)也属于刚刚会用点JQuery的那一类型, 在学习过程中也遇到挺多问题,特别是在开始入门的时候.一直准备写些有关JQuery的文章,但又恐自己文笔及表达能力有限而"误人子弟",最终还是鼓起勇气. 如在文章中有错误或者不合适的理解望广大朋友直接指出批评.
2009-06-06
Jquery 复选框取值兼容FF和IE8(测试有效)
Jquery 复选框取值的文章网上有很多的，不过可以同时兼容FF和IE8的确实没有几个，下面有个不错的方法经测试有效
2013-10-10
jquery.cvtooltip.js 基于jquery的气泡提示插件
显示气泡提示的前提是，一定会有一个被提示的对象，默认的位置是根据body来计算的，这样的坏处就是如果页面内容发生了变化，而气泡的位置没有改变，导致提示目的失败。
2010-11-11
jquery html添加元素/删除元素操作实例详解
这篇文章主要介绍了jquery html添加元素/删除元素操作,结合实例形式详细分析了jquery html添加元素/删除元素相关函数功能、用法及操作注意事项,需要的朋友可以参考下
2020-05-05
基于JQuery实现图片轮播效果(焦点图)
这篇文章主要为大家详细介绍了基于JQuery实现图片轮播效果，利用Jquery制作焦点图左右轮播特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-02-02

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具