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 相关文章推荐
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
大学生毕业的自我评价分享
2014/01/02 职场文书
打架检讨书800字
2014/01/10 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
老兵退伍感言
2015/08/03 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python