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制作LED 时钟特效

    jquery制作LED 时钟特效

    这篇文章主要介绍了jquery制作LED 时钟特效,效果非常不错,需要的朋友可以参考下
    2015-02-02
  • checkbox使用示例

    checkbox使用示例

    checkbox想必大家对这个控件并不陌生吧,毕竟在网页制作过程中经常会使用到,下面与大家分享个示例主要介绍checkbox的使用,感兴趣的朋友可以参考下
    2013-08-08
  • jQuery实现的指纹扫描效果实例(附演示与demo源码下载)

    jQuery实现的指纹扫描效果实例(附演示与demo源码下载)

    这篇文章主要介绍了jQuery实现的指纹扫描效果,以完整实例形式分析了jQuery实现图像按照指定模式显示的相关实现技巧,并附带附示例演示与demo源码供读者下载参考,需要的朋友可以参考下
    2016-01-01
  • jQuery中click事件的定义和用法

    jQuery中click事件的定义和用法

    这篇文章主要介绍了jQuery中click事件的定义和用法,以实例形式详细分析了jQuery中的click事件具体定义方法、参数及用法实例,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jquery UI实现autocomplete在获取焦点时得到显示列表功能示例

    jquery UI实现autocomplete在获取焦点时得到显示列表功能示例

    这篇文章主要介绍了jquery UI实现autocomplete在获取焦点时得到显示列表功能,结合实例形式分析了jquery UI实现autocomplete事件响应及显示下拉列表功能操作技巧,需要的朋友可以参考下
    2019-06-06
  • 基于jQuery实现多标签页切换的效果(web前端开发)

    基于jQuery实现多标签页切换的效果(web前端开发)

    这篇文章主要介绍了基于jQuery实现多标签页切换的效果(web前端开发)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • jQuery Real Person验证码插件防止表单自动提交

    jQuery Real Person验证码插件防止表单自动提交

    这篇文章为大家介绍了一款jQuery验证码插件Real Person,可以防止自动提交表单
    2015-11-11
  • jquery一般方法介绍 入门参考

    jquery一般方法介绍 入门参考

    对于刚开始接触jquery的朋友是个不错学习参考,对于一些方法的使用也给出了说明。
    2011-06-06
  • jquery操作cookie插件分享

    jquery操作cookie插件分享

    在网页客户端,我们经常会遇到读取或者设置cookie的情况,如果用纯生的js我们可能会遇到一些兼容性带来的麻烦,这里给大家介绍一个比较实用jquery操作cookie的插件
    2014-01-01
  • Html5+jQuery+CSS制作相册小记录

    Html5+jQuery+CSS制作相册小记录

    这篇文章主要为大家详细介绍了Html5+jQuery+CSS制作相册小记录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论