jquery实现手风琴案例


Posted in jQuery onMay 04, 2020

手风琴案例练习,供大家参考,具体内容如下

显示效果

jquery实现手风琴案例

重点:

1.鼠标进入事件mouseenter 鼠标离开事件mouseleave
2. 再执行下一次操作前都要先通过.stop() 停止动画
3.sublings()选择当前事件外的兄弟事件

完整代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 *{
 margin: 0;
 padding:0;
 }
 
 img{
  width: 500px;
  height:250px;
  
 }
 
 
 .box{
  width: 900px;
  height: 300px;
  margin: 20px auto;
  border: 1px solid #808080;
 }
 
 .box ul li{
  float: left;
  list-style: none;
  overflow: hidden;
  height: 300px;
  width: 100px;
  
  position: relative;
  
 }
 
 .text{
  background-color:lightsteelblue;
  opacity: 0.7;
  text-align: center;
  height: 50px;
  width: 100%;
  line-height: 50px;
  position: absolute;
  color: black;
  bottom: 50px;
  
 }
 .link{
  background-color:whitesmoke;
  font-size: 15px;
  text-indent: 20px;
  height:50px ;
  line-height: 50px;
 }
 a{
  text-decoration: none;
 }
 p{
  float: left;
  
 }
 span{
  margin: auto 20px;
 }
 </style>
 </head>
 <body>
 <div class="box">
 <ul>
 //每一个li为一个手风琴页面的显示内容
 <li class="show" style="width: 500px;">
  <div class="img">
  <img class="show" src="img/images/p0.jpg" >
  </div>
  <div class="text">
  东大门
  </div>
  <div class="link">
  <a href="">
  <p>科技</p>
  <p>
  <span>科技故事</span>
  <span>科技故事</span>
  <span>科技故事</span>
  </p>
  </a>
  </div>
 </li>
 <li >
  <div class="img">
  <img src="img/images/p1.jpg" >
  </div>
  <div class="text">
  雷阳广场
  </div>
  <div class="link">
  <a href="">
  <p>科技</p>
  <p>
  <span>科技故事</span>
  <span>科技故事</span>
  <span>科技故事</span>
  </p>
  </a>
  </div>
 </li>
 <li >
  <div class="img">
  <img src="img/images/p3.jpg" >
  </div>
  <div class="text">
  校园石碑
  </div>
  <div class="link">
  <a href="">
  <p>东大门</p>
  <p>
  <span>科技故事</span>
  <span>科技故事</span>
  <span>科技故事</span>
  </p>
  </a>
  </div>
 </li>
 <li >
  <div class="img">
  <img src="img/images/p4.jpg" >
  </div>
  <div class="text">
  钟楼
  </div>
  <div class="link">
  <a href="">
  <p>科技</p>
  <p>
  <span>科技故事</span>
  <span>科技故事</span>
  <span>科技故事</span>
  </p>
  </a>
  </div>
 </li>
 <li >
  <div class="img">
  <img src="img/images/p5.jpg" >
  </div>
  <div class="text">
  椰林
  </div>
  <div class="link">
  <a href="">
  <p>科技</p>
  <p>
  <span>科技故事</span>
  <span>科技故事</span>
  <span>科技故事</span>
  </p>
  </a>
  </div>
 </li>
 </ul>
 </div>
 </body>
 <script src="./js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 $(function(){
 var $li=$("ul>li") 
 $li.mouseenter(function () { //鼠标移入图片宽度变为500,siblings()把其他兄弟的宽度恢复默认宽度。
 //stop():在执行每次的事件前都必须停止上次的执行的事件,否则会出现最后一次鼠标事件移出后,图片显示空白
  $(this).stop().animate({width:500}).siblings().stop().animate({width:100}); 
 
 }); 
 $li.mouseleave(function () { //鼠标移出事件
  $(this).stop().animate({width:500}); 
  }); 
 });
 </script>
</html>

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

jQuery 相关文章推荐
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 #jQuery
jQuery实现的上拉刷新功能组件示例
May 01 #jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 #jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 #jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 #jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 #jQuery
You might like
克隆一个新项目的快捷方式
2013/04/10 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
webpack4简单入门实例
2018/09/06 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
Python数据类型学习笔记
2016/01/13 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
视光学专业自荐信
2014/06/24 职场文书
金砖之国观后感
2015/06/11 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
mysql如何配置白名单访问
2021/06/30 MySQL
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL