当前位置 :
使用邮箱登录17素材
已连续签到1天,签到3天将获得积分VIP1天jquery实现手风琴效果
转载 & & 作者：魔芋铃
这篇文章主要介绍了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"&
&meta http-equiv="Content-Type" content="text/ 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&
&!--手风琴效果--&
&div class="flash4"&
&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&
&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&
&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&
&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&
&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&
&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 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&
&!--手风琴结束--&
&script src="js/script.js" type="text/javascript"&&/script&
&div style="text-align:clear:"&
&CSS代码：
@charset"utf-8";
*{margin:0padding:0font-family:"微软雅黑";font-size:12 text-decoration:list-style-type:}
img{border:0}
.flash4{width:1180height:450margin:0margin-bottom:20position:}
.flash4 ul li{width:106height:450border-left:1px solid #000;position:overflow:float:}
.flash4 ul li .imgTop img{opacity:0.4;}
.flash4 ul li .imgTop img.tm{opacity:1;}
.flash4 ul li .imgCon{width:538height:405}
.flash4 ul li .imgCen{width:538height:50background:rgba(0,0,0,0.5);color:#font-size:20line-height:50position:left:0bottom:45text-indent:20display:}
.flash4 ul li .imgBot{width:538height:45background:#222;}
.flash4 ul li .imgBot p.bt_1{width:80line-height:45font-size:16color:#text-indent:20float:}
.flash4 ul li .imgBot p.bt_2{width:458height:45line-height:45float:display:}
.flash4 ul li .imgBot p.bt_2 span{font-size:14color:#padding-right:30background:url(../images/part2_icon.png)no-padding-left:10}
.flash4 ul li.first{width:538}
.flash4 ul li.last{position:right:0bottom:0}
jQuery代码：
//手风琴动画效果
var index7 =0;//定义变量，赋值为0；
$(".flash4 ul li").mouseenter(function(){
index7 = $(this).index();
$(this).stop().animate({
},500).siblings("li").stop().animate({
$(".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({
$(".imgCen").css("display","none");
$("p.bt_2").css("display","none");
源码下载：
希望大家会喜欢分享的jquery手风琴效果。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jQuery手风琴动画特效插件
在线预览！PROMULGATOR
广东省珠海市香洲区
关注作者 (1)
收藏此代码 (18)
美丽的西藏布达拉宫
美丽的西藏布达拉宫
美丽的西藏布达拉宫
美丽的西藏布达拉宫
padding:0;
html,body {
width:100%;
height:329
margin-left:-4
margin-top:40
#prew ul.list {
width:100%;
height:100%;
#prew ul.list li {
height:100%;
border-left:1px solid #888;
#prew ul.list li:nth-child(1) {
border-left:
#prew ul.list li.on {
width:100;
height:100%;
#prew ul.list li>img {
#prew ul.list li>div {
height:100%;
z-index:9;
background-color:rgba(0,0,0,.3);
#prew ul.list li>div>p {
height:350
font-size:26
text-align:
line-height:35
(function() {
$listDiv = $('#prew ul.list li>div');
$listLi = $('#prew ul.list li');
$listDiv.hover(function() {
$(this).parent().stop(true).animate({
width: 500
300).siblings('li').stop(true).animate({
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
jQuery手风琴效果
代码描述：jQuery手风琴图版展示效果
暂时没有评论！实现效果如图所示：
html结构：
&div class="item_box box10"&
&div class="item_box_wp"&
&div class="voice_2"&
&li class="li1" id="li1"&
&div class="fold" style="display:"&
&span class="img"&&/span&
&span class="txt"&插件库&/span&
&div class="unfold" style="display:block"&
&dt&&img src="images/img10.png" /&&/dt&
&dd&使用语音外呼的模式将指定的语音呼入至接听人，可通过这种方式为针对性的客户提供会议通知、活动通知，并可通过API接口程序化控制呼出时间、呼出效果反馈&/dd&
&li class="li2"&
&div class="fold"&
&span class="img"&&/span&
&span class="txt"&点击呼叫&/span&
&div class="unfold"&
&dt&&img src="images/img42.png" /&&/dt&
&dd&通过APP应用内按钮或浏览器网页按钮点击并发起IP通话、运营商线路通话服务，减少用户交互，提升用户体验&/dd&
&li class="li3"&
&div class="fold"&
&span class="img"&&/span&
&span class="txt"&直拨通话&/span&
&div class="unfold"&
&dt&&img src="images/img49.png" /&&/dt&
&dd&无论是智能终端、浏览器模式，通过APP或者网页发起通话，接通方为手机用户或固话用户，常见集成至与企业服务相关的移动应用、企业客服座席。&/dd&
&li class="li4"&
&div class="fold"&
&span class="img"&&/span&
&span class="txt"&回拨通话&/span&
&div class="unfold"&
&dt&&img src="images/img50.png" /&&/dt&
&dd&同时通过平台方发起主叫和被叫双方，定制通话方满足不同需求的客户服务，企业服务易可根据具体业务需求为客户提供定制服务&/dd&
&li class="li5"&
&div class="fold"&
&span class="img"&&/span&
&span class="txt"&互联网通话&/span&
&div class="unfold"&
&dt&&img src="images/img51.png" /&&/dt&
&dd&基于互联网纯网络通话，无运营商和地域限制，拥有更清晰的语音质量，支持语音三方密钥的加密传输&/dd&
&li class="li6"&
&div class="fold"&
&span class="img"&&/span&
&span class="txt"&语音会议&/span&
&div class="unfold"&
&dt&&img src="images/img52.png" /&&/dt&
&dd&同时桥接多人基于IP、电话语音的会议服务，基于API控制会议时长、成员邀请、禁音、移除等功能。&/dd&
$(function(){
//语音通知手风琴效果
$(".voice_2 ul li").each(function(){
var fold = $(this).find(".fold");
var unfold = $(this).find(".unfold");
if(fold.is(":hidden")){
$(this).width(680);
$(this).width(100);
$(".voice_2 ul li").click(function(){
var li_index = $(this).index();
$(this).animate({width:680},200);
$(this).find(".unfold").show();
$(this).find(".fold").hide();
$(this).siblings().animate({width:100},200);
$(this).siblings().find(".unfold").hide();
$(this).siblings().find(".fold").show();
阅读(...) 评论()