简单实现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.load()和Jsp的include的区别
Apr 12 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery实时统计输入框字数及限制
Jun 24 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
php类中private属性继承问题分析
2012/11/01 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
python将图片文件转换成base64编码的方法
2015/03/14 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python3 mmh3安装及使用方法
2019/10/09 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Python基于WordCloud制作词云图
2019/11/29 Python
详解Python中的分支和循环结构
2020/02/11 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
css3 transform属性详解
2014/09/30 HTML / CSS
一句话工作感言
2014/03/01 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
云台山导游词
2015/02/03 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
JS的深浅复制详细
2021/10/16 Javascript
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS