jQuery制作水平手风琴

2014-01-06阅读(5275)评论(1)牵着狗狗看MM

苏州实时公交查询

先看效果图
1
在这个例子中,我创建了一个水平手风琴效果,用来展开每个缩略图的提示内容。下面我们来看其具体是如何通过jQuery来实现。

HTML代码

[html]<ul id="horizontalAccordion" class="Accordion">
<li>
<a href="#" id="a1">
<img src="1.png" width="69" height="69" alt="" />
<p>
<strong>水平手风琴一</strong>
我是内容一
</p>
</a>
</li>
<li>
<a href="#">
<img src="2.png" width="69" height="69" alt="" />
<p>
<strong>水平手风琴二</strong>
我是内容二
</p>
</a>
</li>
<li>
<a href="#">
<img src="3.png" width="69" height="69" alt="" />
<p>
<strong>水平手风琴三</strong>
我是内容三
</p>
</a>
</li>
</ul>
[/html]

上面就是我们这个例子需要的HTML结构。我给第一个列表项中的a定义了一个id名“a1”,主要是用来设置一个初始宽度,当页面加载时,让其展开。

CSS代码

[css].Accordion{
list-style: none;
margin: 0;
padding: 0;
}

.Accordion li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
background: #333;
}

.Accordion li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
text-decoration: none;
color: #fff;
}

#a1{
width: 210px;
}

.Accordion li img{
position: absolute;
border: 3px solid #881212;
}

.Accordion li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}

.Accordion li strong {
display: block;
}
[/css]

我们通过样式进行列表的初步美化,这里最关键的是a设置了固定的高度和宽度。并设置“overflow:hidden”用来防止p标签中的内容溢出。

jQuery代码

[js]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//定义展开的块
var lastBlock = $(‘#a1’);
//展开的块的宽度
var maxWidth = 210;
//折叠的块的宽度
var minWidth = 75;

$(‘#horizontalAccordion a’).hover(function(){
$(lastBlock).animate(
{width: minWidth + "px"},
{queue:false,duration:400}
);
$(this).animate(
{width:maxWidth + "px"},
{queue:false,duration:400}
);
lastBlock = this;
});
});

</script>
[/js]

为了在页面中使用jQuery,你首先需要从jQuery官网上下载jQuery版本库,并放入你页面的中或者放在之前。

上面展示的jQuery脚本就是我们实现水平手风琴效果的所有脚本代码。

设置了一些初始变量:【lastBlock】代表已经展开的块,我们页面载入时展开的块就是“#a1”;【maxWidth】表示的是展开块的宽度,此例中使用的是“#a1”的宽度“210px”;【minWidth】表示的是折叠块的宽度,我们此处就是a定义的宽度“75px”;
a绑定一个“.hover()”事件;
在“.hover()”事件中调用两次“.animate()”:第一个是将“lastBlock”折叠起来,因为我们页面载入进来时“#a1”是展开的,第二个是鼠标移入的当前a元素展开其大小。
有一点需要特别的注意:需要在“.animate()”定义“{queue:false}”。如果将其值设置为“true”时,会致使每一个“.hover()”事件存储起来,从而动画会接二边三的播放。

完成上面的所有步骤后,用jQuery制作水平手风琴就完成了。

Demo

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » jQuery制作水平手风琴
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏