jquery实现手风琴效果


Posted in Javascript onNovember 20, 2015

本文实例讲述了jquery实现手风琴效果的代码。分享给大家供大家参考。具体如下:

效果过程就是当鼠标覆盖图片时,这张图片的宽度变大,其他兄弟图片宽度变小,效果如下:

jquery实现手风琴效果

具体代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery横向手风琴图片展示动画DEMO演示</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<!--手风琴效果-->
<div class="flash4">
<ul>
<li class="first">
<div class="imgTop"><img src="images/ruili_img1.jpg" width="538" height="405" alt=""class="tm"/></div>
<div class="imgCen">给你15分钟做“对”的时尚人</div>
<div class="imgBot"><a href=""><p class="bt_1">服饰</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p></a></div>
</li>
<li>
<div class="imgTop"><img src="images/ruili_img2.jpg" width="538" height="405" alt=""/></div>
<div class="imgCen">蒂芙尼为你吟唱一曲自然颂</div>
<div class="imgBot"><a href=""><p class="bt_1">服饰</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p></a></div>
</li>
<li>
<div class="imgTop"><img src="images/ruili_img3.jpg" width="538" height="405" alt=""/></div>
<div class="imgCen">瑞丽·妆线上精品轻杂志</div>
<div class="imgBot"><a href=""><p class="bt_1">服饰</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p></a></div>
</li>
<li>
<div class="imgTop"><img src="images/ruili_img4.jpg" width="538" height="405" alt=""/></div>
<div class="imgCen">《ar》刘海造型女孩只需这样即刻焕然一新</div>
<div class="imgBot"><a href=""><p class="bt_1">服饰</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p></a></div>
</li>
<li>
<div class="imgTop"><img src="images/ruili_img5.jpg" width="538" height="405" alt=""/></div>
<div class="imgCen">电影×大明星见证传奇从戛纳诞生</div>
<div class="imgBot"><a href=""><p class="bt_1">服饰</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p></a></div>
</li>
<li>
<div class="imgTop"><img src="images/ruili_img6.jpg" width="538" height="405" alt=""/></div>
<div class="imgCen">重返20岁试用周</div>
<div class="imgBot"><a href=""><p class="bt_1">服饰</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p></a></div>
</li>
<li class="last">
<div class="imgTop"><img src="images/ruili_img7.jpg" width="538" height="405" alt=""/></div>
<div class="imgCen">玩美女孩盖天天阳光女神进阶攻略</div>
<div class="imgBot"><a href=""><p class="bt_1">服饰</p><p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p></a></div>
</li>
</ul>
</div>
<!--手风琴结束-->
<script src="js/script.js" type="text/javascript"></script>
<div style="text-align:center;clear:both;">
</div>
</body>
</html>

CSS代码:

@charset"utf-8";
*{margin:0px;padding:0px;font-family:"微软雅黑";font-size:12px; text-decoration:none;list-style-type:none;}
img{border:0px;}
/*开始*/
.flash4{width:1180px;height:450px;margin:0pxauto;margin-bottom:20px;position:relative;}
.flash4 ul li{width:106px;height:450px;border-left:1px solid #000;position:relative;overflow:hidden;float:left;}
.flash4 ul li .imgTop img{opacity:0.4;}
.flash4 ul li .imgTop img.tm{opacity:1;}
.flash4 ul li .imgCon{width:538px;height:405px;}
.flash4 ul li .imgCen{width:538px;height:50px;background:rgba(0,0,0,0.5);color:#fff;font-size:20px;line-height:50px;position:absolute;left:0px;bottom:45px;text-indent:20px;display:none;}
.flash4 ul li .imgBot{width:538px;height:45px;background:#222;}
.flash4 ul li .imgBot p.bt_1{width:80px;line-height:45px;font-size:16px;color:#fff;text-indent:20px;float:left;}
.flash4 ul li .imgBot p.bt_2{width:458px;height:45px;line-height:45px;float:left;display:none;}
.flash4 ul li .imgBot p.bt_2 span{font-size:14px;color:#fff;padding-right:30px;background:url(../images/part2_icon.png)no-repeat left center;padding-left:10px;}
.flash4 ul li.first{width:538px;}
.flash4 ul li.last{position:absolute;right:0px;bottom:0px;}

jQuery代码:

//手风琴动画效果
var index7 =0;//定义变量,赋值为0;
$(".flash4 ul li").mouseenter(function(){
index7 = $(this).index();
$(this).stop().animate({
width:538
},500).siblings("li").stop().animate({
width:106
},500);
$(".imgCen").eq(index7).css("display","block").siblings(".imgCen").css("display","none");
$("p.bt_2").eq(index7).css("display","block").siblings("p.bt_2").css("display","none");
$(".imgTop img").eq(index7).addClass("tm").siblings(".imgTop img").removeClass("tm");
});
$(".flash4 ul li").mouseleave(function(){
$(this).eq(index7).stop().animate({
width:538
},500);
$(".imgCen").css("display","none");
$("p.bt_2").css("display","none");
});

源码下载:jquery实现手风琴效果

希望大家会喜欢分享的jquery手风琴效果。

Javascript 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
jquery禁用右键示例
Apr 28 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
用js实现博客打赏功能
Oct 24 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
JavaScript实现简单图片切换
Apr 29 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 #Javascript
jquery背景跟随鼠标滑动导航
Nov 20 #Javascript
JavaScript获取浏览器信息的方法
Nov 20 #Javascript
JavaScript性能优化之小知识总结
Nov 20 #Javascript
Bootstrap每天必学之基础排版
Nov 20 #Javascript
详解JavaScript的回调函数
Nov 20 #Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 #Javascript
You might like
php学习笔记之 函数声明(二)
2011/06/09 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
angularjs基础教程
2014/12/25 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
详解vue-cli3使用
2018/08/14 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
python-numpy-指数分布实例详解
2019/12/07 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
用Python进行websocket接口测试
2020/10/16 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
什么是索引指示器
2012/08/20 面试题
大四自我鉴定
2014/02/08 职场文书
汽车促销活动方案
2014/03/31 职场文书
陕西导游词
2015/02/04 职场文书
诉讼和解协议书
2016/03/23 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL