您当前位于：jQuery实战开发 ——> jQuery特效实战开发 - 实例：列表项滑动

jQuery特效实战开发 - 实例：列表项滑动

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

JQ特效—列表项滑动

HTML5学堂：列表模块是我们浏览网站中，很常见的模块，个性、好看的列表模块能吸引住用户的眼光。本文为大家介绍一款好看、实用、有趣的列表模块效果。用户通过模块内按钮的控制，查看更多的列表内容。反之，也可以通过按钮将模块小化，显示部分的内容。

效果需求

文章列表是网站内容页常见的模块，本文为大家分享一款文章列表的效果，通过点击加号，其所在的文章列表的高度发生变化，让更多的文章标题展示出来，同时加号会在滑下之后变成减号。反之亦然。不仅节省了模块的占用空间，还提升了浏览网站的乐趣。

效果展示

效果实现

结构代码

<body>
<div class="sidebar">
<div>
<h2>最新动态</h2>
<ul>
<li><a href="http://url.cn/JLu82d" title="网页的构成">网页的构成</a></li>
<li><a href="http://url.cn/Ppz25D" title="FOUC-文档样式短暂失效">FOUC-文档样式短暂失效</a></li>
<li><a href="http://url.cn/IyKJJ0" title="浏览器的渲染原理简介">浏览器的渲染原理简介</a></li>
<li><a href="http://url.cn/PeVC6x" title="（一）Form 表单问题多多初入前端孩子的“恶梦”">（一）Form 表单问题多多初入前端孩子的“恶梦”</a></li>
<li><a href="http://url.cn/ROtfyw" title="（二）Form 表单问题多多初入前端孩子的“恶梦”">（二）Form 表单问题多多初入前端孩子的“恶梦”</a></li>
<li><a href="http://url.cn/NooKBd" title="（三）Form 表单问题多多初入前端孩子的“恶梦”">（三）Form 表单问题多多初入前端孩子的“恶梦”</a></li>
<li><a href="http://url.cn/MROLfs" title="HTML特殊字符编码对照表">HTML特殊字符编码对照表</a></li>
<li><a href="http://url.cn/OcQegT" title="HTML标签嵌套规则">HTML标签嵌套规则</a></li>
<li><a href="http://url.cn/RXOtRn" title="CSS reset重置 CSS重置代码">CSS reset重置 CSS重置代码</a></li>
<li><a href="http://url.cn/PSuB7D" title="HTML的各个标签的默认样式有哪些">HTML的各个标签的默认样式有哪些</a></li>
<li><a href="http://url.cn/OvEahR" title="CSS选择器优先级">CSS选择器优先级</a></li>
<li><a href="http://url.cn/QYYSjf" title="CSS选择器种类以及书写顺序">CSS选择器种类以及书写顺序</a></li>
<li><a href="http://url.cn/QtM2pf" title="CSS引入方式">CSS引入方式</a></li>
<li><a href="http://url.cn/NUhSj5" title="CSS important">CSS important</a></li>
<li><a href="http://url.cn/NuopUA" title="border:none;与border:0;的区别">border:none;与border:0;的区别</a></li>
<li><a href="http://url.cn/OPwGB2" title="img中alt与title辨析">img中alt与title辨析</a></li>
<li><a href="http://url.cn/QsogUN" title="DIV+CSS布局与table布局的比较区别">DIV+CSS布局与table布局的比较区别</a></li>
<li><a href="http://url.cn/J7c6hY" title="em标签与strong标签区别">em标签与strong标签区别</a></li>
<li><a href="http://url.cn/MM7pH6" title="行内元素和块状元素的区别">行内元素和块状元素的区别</a></li>
<li><a href="http://url.cn/RdftMZ" title="link和@import的区别">link和@import的区别</a></li>
</ul>
<div></div>
</div>
<div>
<h2>相关文章</h2>
<ul>
<li><a href="http://url.cn/JLu82d" title="网页的构成">网页的构成</a></li>
<li><a href="http://url.cn/Ppz25D" title="FOUC-文档样式短暂失效">FOUC-文档样式短暂失效</a></li>
<li><a href="http://url.cn/IyKJJ0" title="浏览器的渲染原理简介">浏览器的渲染原理简介</a></li>
<li><a href="http://url.cn/PeVC6x" title="（一）Form 表单问题多多初入前端孩子的“恶梦”">（一）Form 表单问题多多初入前端孩子的“恶梦”</a></li>
<li><a href="http://url.cn/ROtfyw" title="（二）Form 表单问题多多初入前端孩子的“恶梦”">（二）Form 表单问题多多初入前端孩子的“恶梦”</a></li>
<li><a href="http://url.cn/NooKBd" title="（三）Form 表单问题多多初入前端孩子的“恶梦”">（三）Form 表单问题多多初入前端孩子的“恶梦”</a></li>
<li><a href="http://url.cn/MROLfs" title="HTML特殊字符编码对照表">HTML特殊字符编码对照表</a></li>
<li><a href="http://url.cn/OcQegT" title="HTML标签嵌套规则">HTML标签嵌套规则</a></li>
<li><a href="http://url.cn/RXOtRn" title="CSS reset重置 CSS重置代码">CSS reset重置 CSS重置代码</a></li>
<li><a href="http://url.cn/PSuB7D" title="HTML的各个标签的默认样式有哪些">HTML的各个标签的默认样式有哪些</a></li>
<li><a href="http://url.cn/OvEahR" title="CSS选择器优先级">CSS选择器优先级</a></li>
<li><a href="http://url.cn/QYYSjf" title="CSS选择器种类以及书写顺序">CSS选择器种类以及书写顺序</a></li>
<li><a href="http://url.cn/QtM2pf" title="CSS引入方式">CSS引入方式</a></li>
<li><a href="http://url.cn/NUhSj5" title="CSS important">CSS important</a></li>
</ul>
<div></div>
</div>
</div>
</body>

以上代码为大图渐变效果的HTML结构，使用一个类名为sidebar的div标签包裹实现效果的HTML结构，根据效果需求选用标题h2标签及列表项标签ul，子级元素使用li表示每个选项内容。

欢迎沟通交流~HTML5学堂

样式代码

<style>
.sidebar{
width: 160px;
background: #eef;
}
.sidebar div div{
height: 50px;
background: url('../../common/images/add.png') 0 0 no-repeat;
cursor: pointer;
}
.sidebar h2{
height: 30px;
line-height: 30px;
font-size: 16px;
font-weight: bold;
color: #ff92d4;
}
.sidebar ul{
height: 200px;
overflow: hidden;
}
.sidebar li{
height: 20px;
line-height: 20px;
font-size: 12px;
overflow: hidden;
}
.sidebar div .min{
background: url('../../common/images/minus.png') 0 0 no-repeat;
}
</style>

以上代码为列表项滑动效果的CSS样式代码，给整体模块设置了宽度和背景颜色，对加号按钮设置了背景图、对标题进行行高、字体属性、颜色等样式处理。每个子元素设置了高度、行高等属性。

行为代码

<script>
$(function(){
var judge = true;
$('.sidebar div div').click(function(){
var _this = $(this);
if (judge) {
var trueHeight = $(this).siblings('ul').children().length;
_this.siblings('ul').animate({
'height' : trueHeight * 20 + 'px'
}, function(){
_this.addClass('min');
judge = false;
});
} else {
_this.siblings('ul').animate({
'height' : '200px'
}, function(){
_this.removeClass('min');
judge = true;
});
}
})
});
</script>

以上代码为列表项滑动效果的jQuery行为代码，首先定义了一个变量judge，并赋值为true。之后，给类名为sidebar的div绑定了点击(click)事件，当用户点击按钮时，进行if语句判断，当judge的值为true时，执行第7行~第13行代码。使用trueHeight存储模块内选项的个数。模块的高度通过.animate()发生变化，在高度变化完毕之后，给当前的这个模块增加一个类名min，并把变量judge的值更改为false。反之亦然。

欢迎沟通交流~HTML5学堂