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实现图片平滑滚动详解
Mar 22 jQuery
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
Jquery-data的三种用法
Apr 18 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery实现简单弹幕效果
Nov 28 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 图片上传代码
2011/09/13 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
python实现猜数字小游戏
2020/03/24 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
死亡赔偿协议书
2015/01/28 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
HTML常用标签超详细整理
2022/03/19 HTML / CSS