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手风琴效果。

赞 (0)

相关推荐

  • 基于Jquery代码实现手风琴菜单

    基于Jquery代码实现手风琴菜单

    先给大家展示效果图: 先看页面代码,列表的嵌套: <div id="menuDiv"> <ul id="menu"> <li class="parentLi"> <span>B</span> <ul class="childrenUl"> <li class="childrenLi"><span>C</sp

  • 基于jQuery实现图片推拉门动画效果的两种方法

    ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li>![](images/slidepic2.jpg)</li> --> <li&g

  • Jquery组件easyUi实现手风琴(折叠面板)示例

    Jquery组件easyUi实现手风琴(折叠面板)示例

    本文是为大家分享了Jquery easyUi手风琴效果,供大家参考,具体内容如下 效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Accordion - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css&qu

  • 轻松实现jquery手风琴效果

    轻松实现jquery手风琴效果

    为大家讲解的JQuery动画特效为手风琴,废话不多说,先看最终实现效果图. 一.实现原理分析 对应的立体图: 二. HTML代码分析 <body> <div id="container"> <ul id="content"> <li class="first"> <h3>真</h3> <div><img src="images/0.jpg"

  • jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单

    jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单

    先给大家看下效果图,效果图展示如下: 关键代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页</title> &l

  • 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>  <

  • js以及jquery实现手风琴效果

    最近又复习了jQuery的知识,既然jQuery是javascript的一个库.jQuery能做到的事情javascript也能做到.因此用这两种方法实现了图片手风琴效果. 按照惯例,还是上代码吧,因为代码里有我的注释也就相当于解释了!(^__^) 嘻嘻-- 先看一下javascript的代码吧: div布局:注意哦,里面的图片我们用js代码生成 <div id="box"> <ul> <li></li> <li></l

  • 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=&qu

  • jQuery实现手风琴效果（蒙版）

    jQuery实现手风琴效果（蒙版）

    本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding:0; margin:0; }

  • 精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程

    精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程

    当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换.借助流行的 jQuery 框架,只需很少的代码就可以实现精美的手风琴效果,帮助你的网站吸引更多用户的眼球. Elegant Accordion with jQuery and CSS3 首先推荐的这款插件是基于 jQuery 和 CSS3 实现的优雅的鼠标悬停手风琴效果. 制作教程 在线演示 Vertical Sliding Accordi

  • 基于jquery实现手风琴效果

    基于jquery实现手风琴效果

    用jquery来实现手风琴效果是非常简单的哦,供大家参考,具体内容如下 首先来看看效果 上代码 html <div id="acc">       <ul>         <li class="active">           <h3 class="active">红玫瑰</h3>           <div><img src="img/bg1.jpg

  • 简单实现jQuery手风琴效果

    本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下 js代码: <script type="text/javascript" src="jquery-3.0.0.js"></script> <script type="text/javascript"> $(function() { //获取所有li遍历 $(".li_list").each(function(

  • 基于jquery的手风琴图片展示效果实现方法

    基于jquery的手风琴图片展示效果实现方法

    本文实例讲述了基于jquery的手风琴图片展示效果实现方法.分享给大家供大家参考.具体实现方法如下: 代码运行效果如下图所示: index.html页面代码如下: 复制代码 代码如下: <!DOCTYPE html> <html class=''> <head>     <title>一款基于jquery的手风琴图片展示效果demo</title>     <style class="cp-pen-styles">

  • jquery超简单实现手风琴效果的方法

    本文实例讲述了jquery超简单实现手风琴效果的方法.分享给大家供大家参考.核心代码如下: $("#accordion .expanded").hide(); $("a.opening").click(function(){ $(this).next().slideToggle('fast', function(){ $(this).prev("a.opening").toggleClass("active"); }); re

  • 基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

    基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

    一.手风琴菜单效果图及代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴效果制作</title> <link rel="stylesheet" href="../css/reset.css"> <style> .con{ wi

随机推荐