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 相关文章推荐
一个简单的js鼠标划过切换效果
Jun 30 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
js取模(求余数)隔行变色
May 15 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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代码简化
2010/02/08 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
vue-dialog的弹出层组件
2020/05/25 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
Java软件工程师综合面试题笔试题
2013/09/08 面试题
英文版银行求职信
2013/10/09 职场文书
2014年中秋寄语
2014/08/11 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
525心理健康活动总结
2015/05/08 职场文书
长江七号观后感
2015/06/11 职场文书
学生病假条范文
2015/08/17 职场文书
科级干部培训心得体会
2016/01/06 职场文书
golang中的空slice案例
2021/04/27 Golang
python基础之文件处理知识总结
2021/05/23 Python
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android