简单实现jQuery手风琴效果


Posted in jQuery onAugust 18, 2017

本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下

js代码:

<script type="text/javascript" src="jquery-3.0.0.js"></script>
<script type="text/javascript">
   $(function() {
    //获取所有li遍历
    $(".li_list").each(function() {
     //当鼠标进去当前li
     $(this).mouseenter(function() {
      //设置当前元素宽度
      $(this).stop()
        .animate({ "width": "600px" }, 500, "linear");
        //设置同胞元素宽度
        .siblings().stop()
           .animate({ "width": "100px" }, 500, "linear");
     });
    });
   });
  </script>

css代码:

.li_list {
    width: 100px;
    height: 300px;
    list-style: none;
    float: left;
    overflow: hidden;
   }

   .li_list img {
    width: 100%;
    height: 100%;
   }

   .divbg {
    width: 600px;
    height: 300px;
    background: rgba(230, 0, 0, 0.5);
    text-align: center;
    line-height: 300px;
    float: left;
   }

   .divbg span {
    display: block;
    width: 100px;
    height: 300px;
    float: left;
   }

   .div1 {
    width: 500px;
    height: 300px;
    float: left;
   }
   .mo{
    width: 600px;
   }

html代码:

<ul class="ul_list">
   <li class="li_list">
    <div class="divbg">
     <span>萌宠</span>
     <div class="div1">
      <img src="img/0.jpg" />
     </div>
    </div>
   </li>
   <li class="li_list">
    <div class="divbg">
     <span>萌宠</span>
     <div class="div1">
      <img src="img/1.jpg" />
     </div>
    </div>
   </li>
   <li class="li_list">
    <div class="divbg">
     <span>萌宠</span>
     <div class="div1">
      <img src="img/2.jpg" />
     </div>
    </div>
   </li>
   <li class="li_list mo">
    <div class="divbg">
     <span>萌宠</span>
     <div class="div1">
      <img src="img/3.jpg" />
     </div>
    </div>
   </li>
  </ul>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery仿微信聊天界面
May 06 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jquery实现手风琴案例
May 04 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 #jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 #jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 #jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 #jQuery
jQuery实现全选、反选和不选功能
Aug 16 #jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 #jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 #jQuery
You might like
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
我读书我快乐演讲稿
2014/05/07 职场文书
出租房屋协议书
2014/09/14 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
学校教学工作总结2015
2015/05/19 职场文书
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS