富贵资源网 Design By www.hznty.com
本文实例讲述了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="/UploadFiles/2021-04-02/jquery.min.js">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手风琴效果。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。