简单实现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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现动态操作table行
Nov 23 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
Ajax PHP分页演示
2007/01/02 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
php实现文件下载代码分享
2014/08/19 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
护士个人自我鉴定
2014/03/24 职场文书
给校长的建议书600字
2014/05/15 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
技术负责人岗位职责
2015/02/10 职场文书
高中教师个人总结
2015/02/10 职场文书
质量整改通知单
2015/04/21 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书