jQuery特效实战开发 - 实例：模块变幻

2015/06/10 00:02:49 | 作者：HTML5学堂（码匠） | 分类：jQuery实战开发 | 关键词：JQ特效,animate,动画,JQ,jQuery

JQ特效—模块变幻

HTML5学堂：个人信息介绍在门户网站中是必不可少的因素，呆板的个人信息介绍模块无法满足用户视觉的享受。本文将分享一款关于个人信息介绍的效果，该效果使用户在查看个人信息时，变得有趣，极大提高了用户体验。用户操控鼠标移入到模块上时，内容区的图像显示大小以及顶部的边框都会发生变化。希望对大家有所帮助~

效果需求

模块变幻是采用jQuery插件制作出来的一个效果。该效果较多的应用在个人中心等模块，使得个人信息介绍变得更加有趣，提高用户体验，该效果的功能如下：当鼠标移入一个信息模块时，内容区的图像显示大小以及顶部的边框都会发生变化。当鼠标移开之后，当信息模块还原至初始状态。

效果展示

效果实现

结构代码

<body>
<div class="con">
<ul>
<li>
<div class="bar"></div>
<dl>
<dt><a href="http://blog.163.com/hongshaoguoguo@126" title=""><img src="../common/images/tea_2.jpg" alt="" title=""></a></dt>
<dd>
<h2>刘国利</h2>
<p>网易博客：独行冰海</p>
<p>微博：独行冰海</p>
<div><a href="" title="">MORE</a></div>
</dd>
</dl>
</li>
<li>
<div class="bar"></div>
<dl>
<dt><a href="http://m18050905128.blog.163.com/" title=""><img src="../common/images/tea_6.jpg" alt="" title=""></a></dt>
<dd>
<h2>陈能堡</h2>
<p>网易博客：梦幻雪冰</p>
<p>微博：我的左手旁边就是你的右手</p>
<div><a href="" title="">MORE</a></div>
</dd>
</dl>
</li>
<li>
<div class="bar"></div>
<dl>
<dt><a href="http://lovelyjpw.blog.163.com/" title=""><img src="../common/images/tea_5.jpg" alt="" title=""></a></dt>
<dd>
<h2>尹鹏</h2>
<p>网易博客：尹小芃槑 </p>
<p>微博：尹小芃槑 </p>
<div><a href="" title="">MORE</a></div>
</dd>
</dl>
</li>
<li>
<div class="bar"></div>
<dl>
<dt><a href="http://linhe-qin.com.blog.163.com/" title=""><img src="../common/images/tea_7.jpg" alt="" title=""></a></dt>
<dd>
<h2>林河钦</h2>
<p>网易博客：路过心上 </p>
<p>微博：窝在心里头 </p>
<div><a href="" title="">MORE</a></div>
</dd>
</dl>
</li>
</ul>
</div>
</body>

以上代码为模块变幻效果的HTML结构，使用类名为con的div包裹所有的HTML结构标签，根据需求，选用ul列表标签，每个子元素使用li表示，顶部的横线使用一个空标签div来显示，内容模块使用了自定义列表dl标签，配合dt、dd展示模块的内容。

欢迎沟通交流~HTML5学堂

样式代码

<style>
body {
background: #fec;
}
.con {
width: 920px;
margin: 0 auto;
overflow: hidden;
}
.con ul {
width: 928px;
}
.con li {
overflow: hidden;
position: relative;
float: left;
width: 220px;
height: 360px;
margin: 0 10px 10px 0;
border: 1px solid #963;
/*margin: 0 8px 8px 0;*/
}
.con .bar {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: #963;
}
.con dt {
padding: 10px;
width: 200px;
height: 200px;
}
.con dt a {
overflow: hidden;
display: block;
height: 100%;
}
.con a img {
display: block;
width: 100%;
height: 200px;
}
.con dd {
position: relative;
height: 169px;
border-bottom: 1px solid #963;
z-index: 1;
}
.con h2 {
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight: bold;
color: #963;
text-align: center;
}
.con p {
overflow: hidden;
height: 24px;
padding: 0 10px;
font-size: 14px;
line-height: 24px;
}
.con dd div {
height: 24px;
margin: 27px 0 0 0;
font-size: 12px;
}
.con dd span {
float: left;
padding: 0 0 0 20px;
}
.con dd a {
float: right;
padding: 0 20px 0 0;
font-weight: bold;
color: #963;
}
</style>

以上代码为模块变幻效果的CSS样式代码，body设置了背景颜色，给内容区域设置了宽及水平。每个模块设置了相对定位、浮动处理、外边距等样式。顶部的小线条采用的是绝对定位的方式将线条固定在顶部并设置了大小及背景颜色。给图片区域设置了大小。图片介绍设置了行高，等字体信息。

行为代码

<script>
$('.con li').hover(function(){
$(this).children('.bar').stop().fadeIn(400);
$(this).find('dt').stop().animate({
"height" : "170px"
});
$(this).find('img').stop().animate({
"margin-top" : "-15px"
});
}, function(){
$(this).children('.bar').stop().fadeOut(400);
$(this).find('dt').stop().animate({
"height" : "200px"
});
$(this).find('img').stop().animate({
"margin-top" : "0px"
});
})
</script>

以上代码为模块变幻效果的jQuery行为代码，首先使用jQuery选择器，选定类名为con下li标签，并给这些li标签绑定hover事件，当鼠标移入该模块区域时，执行第3行~第9行代码，该段代码的含义如下：该模块下的子元素(.children()查找子元素)且类名为bar的元素以淡入的形式在模块内出现。后代元素中，标签名为dt的标签样式属性发生了改变，通过jQuery的.animate({"height" : "170px"})动画改变该标签的高度，同时img的属性也发生了改变，margon-top的值变成了-15px。当鼠标移开该模块，模块内dt、img的属性恢复至css里设置的样式，该模块下类名为bar的元素再次隐藏起来。

欢迎沟通交流~HTML5学堂