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 相关文章推荐
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery实现穿梭框效果
Jan 19 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
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
python插入数据到列表的方法
2015/04/30 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Django添加sitemap的方法示例
2018/08/06 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
Python3数字求和的实例
2019/02/19 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
结婚司仪主持词
2015/06/29 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
详解Python flask的前后端交互
2022/03/31 Python