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 获取Dom元素的实例讲解
Jul 08 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery实现简单评论功能
Aug 19 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
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python NumPy库安装使用笔记
2015/05/18 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
python中解析json格式文件的方法示例
2017/05/03 Python
Python基于WordCloud制作词云图
2019/11/29 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
python编程的核心知识点总结
2021/02/08 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
经济学博士求职自荐信范文
2013/11/23 职场文书
阿德的梦教学反思
2014/02/06 职场文书
法制演讲稿
2014/09/10 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
Python中的 Set 与 dict
2022/03/13 Python
DE1103使用报告
2022/04/05 无线电