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


Posted in jQuery onJanuary 17, 2020

效果

思路分析:

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实现王者荣耀手风琴效果

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

jQuery 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 #jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 #jQuery
jQuery实现轮播图效果demo
Jan 11 #jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 #jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 #jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 #jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 #jQuery
You might like
YB217、YB235、YB400浅听
2021/03/02 无线电
PHP 翻页 实例代码
2009/08/07 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
php旋转图片90度的方法
2013/11/07 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
Python页面加载的等待方式总结
2021/02/28 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
优秀毕业自我鉴定
2014/02/15 职场文书
农民工讨薪标语
2014/06/26 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
大学生见习总结报告
2015/06/24 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书