jquery应用实例分享_实现手风琴特效


Posted in jQuery onFebruary 01, 2018

效果:

jquery应用实例分享_实现手风琴特效

实例如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  *{padding: 0px;margin: 0px;}
  li{
   width: 80px;height:300px;
   float: left;overflow: hidden;
   list-style: none;
  }

 </style>
 <script type="text/javascript "src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<script >
 $(function () {
  $("ul li").mouseover(function (){
   $(this).stop().animate({width:350},500)//stop函数:停止当前正在运行的动画
   //siblings:遍历
   $(this).siblings().stop().animate({width:80},500)//anmate:500ms后将其width变为80px;
  })
 })
</script>
<div>
 <ul>
 <li style="width: 350px"><img src="1.jpg"></li>
 <li><img src="2.jpg"></li>
 <li><img src="3.jpg"></li>
 <li><img src="4.jpg"></li>
 <li><img src="5.jpg"></li>
 </ul>
</div>
</body>
</html>

以上这篇jquery应用实例分享_实现手风琴特效就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 #jQuery
jQuery与vue实现拖动验证码功能
Jan 30 #jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 #jQuery
jQuery代码优化方法总结
Jan 29 #jQuery
jquery写出PC端轮播图实例
Jan 26 #jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 #jQuery
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
jQuery自定义多选下拉框效果
2017/06/19 jQuery
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
别名指示符是什么
2012/10/08 面试题
如何整合JQuery和Prototype
2014/01/31 面试题
医院辞职信范文
2014/01/17 职场文书
科技之星事迹材料
2014/06/02 职场文书
三好学生竞选稿
2015/11/21 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
python使用BeautifulSoup 解析HTML
2022/04/24 Python