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 相关文章推荐
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 Javascript
element多个表单校验的实现
May 27 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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
.NET初级开发工程师面试题
2014/04/18 面试题
node中使用shell脚本的方法步骤
2021/03/23 Javascript
学习雷锋精神演讲稿
2014/05/10 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
债务纠纷起诉书
2015/05/20 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
Elasticsearch 批量操作
2022/04/19 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers