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使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jquery实现广告上下滚动效果
Mar 04 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的FTP学习(四)
2006/10/09 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
python实现爬虫下载漫画示例
2014/02/16 Python
Python操作json数据的一个简单例子
2014/04/17 Python
python中defaultdict的用法详解
2017/06/07 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
Python Grid使用和布局详解
2018/06/30 Python
python3实现名片管理系统
2020/11/29 Python
Python WEB应用部署的实现方法
2019/01/02 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
python实现简单的学生管理系统
2021/02/22 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
汽车促销活动方案
2014/03/31 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
使用python绘制横竖条形图
2022/04/21 Python