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 extend()详解及简单实例
May 06 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jquery实现手风琴案例
May 04 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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/08/11 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP微信分享开发详解
2017/01/14 PHP
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
少女风vue组件库的制作全过程
2019/05/15 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
python 6行代码制作月历生成器
2020/09/18 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
Mysql开启外网访问
2022/05/15 MySQL