HTML5学堂-码匠 HTML5学堂

您当前位于:jQuery实战开发 ——> jQuery特效实战开发 - 实例:列表项滑动
上一篇:jQuery特效实战开发 - 实例:模块变幻 下一篇:没有了

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

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

JQ特效—列表项滑动

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

效果需求

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

效果展示

HTML5学堂 列表项滑动特效图

效果实现

结构代码

  1. <body>
  2. <div class="sidebar">
  3.     <div>
  4.         <h2>最新动态</h2>
  5.         <ul>
  6.             <li><a href="http://url.cn/JLu82d" title="网页的构成">网页的构成</a></li>
  7.             <li><a href="http://url.cn/Ppz25D" title="FOUC-文档样式短暂失效">FOUC-文档样式短暂失效</a></li>
  8.             <li><a href="http://url.cn/IyKJJ0" title="浏览器的渲染原理简介">浏览器的渲染原理简介</a></li>
  9.             <li><a href="http://url.cn/PeVC6x" title="(一)Form 表单 问题多多 初入前端孩子的“恶梦”">(一)Form 表单 问题多多 初入前端孩子的“恶梦”</a></li>
  10.             <li><a href="http://url.cn/ROtfyw" title="(二)Form 表单 问题多多 初入前端孩子的“恶梦”">(二)Form 表单 问题多多 初入前端孩子的“恶梦”</a></li>
  11.             <li><a href="http://url.cn/NooKBd" title="(三)Form 表单 问题多多 初入前端孩子的“恶梦”">(三)Form 表单 问题多多 初入前端孩子的“恶梦”</a></li>
  12.             <li><a href="http://url.cn/MROLfs" title="HTML特殊字符编码对照表">HTML特殊字符编码对照表</a></li>
  13.             <li><a href="http://url.cn/OcQegT" title="HTML标签嵌套规则">HTML标签嵌套规则</a></li>
  14.             <li><a href="http://url.cn/RXOtRn" title="CSS reset重置 CSS重置代码">CSS reset重置 CSS重置代码</a></li>
  15.             <li><a href="http://url.cn/PSuB7D" title="HTML的各个标签的默认样式有哪些">HTML的各个标签的默认样式有哪些</a></li>
  16.             <li><a href="http://url.cn/OvEahR" title="CSS选择器优先级">CSS选择器优先级</a></li>
  17.             <li><a href="http://url.cn/QYYSjf" title="CSS选择器种类以及书写顺序">CSS选择器种类以及书写顺序</a></li>
  18.             <li><a href="http://url.cn/QtM2pf" title="CSS引入方式">CSS引入方式</a></li>
  19.             <li><a href="http://url.cn/NUhSj5" title="CSS important">CSS important</a></li>
  20.             <li><a href="http://url.cn/NuopUA" title="border:none;与border:0;的区别">border:none;与border:0;的区别</a></li>
  21.             <li><a href="http://url.cn/OPwGB2" title="img中alt与title辨析">img中alt与title辨析</a></li>
  22.             <li><a href="http://url.cn/QsogUN" title="DIV+CSS布局与table布局的比较 区别">DIV+CSS布局与table布局的比较 区别</a></li>
  23.             <li><a href="http://url.cn/J7c6hY" title="em标签与strong标签区别">em标签与strong标签区别</a></li>
  24.             <li><a href="http://url.cn/MM7pH6" title="行内元素和块状元素的区别">行内元素和块状元素的区别</a></li>
  25.             <li><a href="http://url.cn/RdftMZ" title="link和@import的区别">link和@import的区别</a></li>
  26.         </ul>
  27.         <div></div>
  28.     </div>
  29.     <div>
  30.         <h2>相关文章</h2>
  31.         <ul>
  32.             <li><a href="http://url.cn/JLu82d" title="网页的构成">网页的构成</a></li>
  33.             <li><a href="http://url.cn/Ppz25D" title="FOUC-文档样式短暂失效">FOUC-文档样式短暂失效</a></li>
  34.             <li><a href="http://url.cn/IyKJJ0" title="浏览器的渲染原理简介">浏览器的渲染原理简介</a></li>
  35.             <li><a href="http://url.cn/PeVC6x" title="(一)Form 表单 问题多多 初入前端孩子的“恶梦”">(一)Form 表单 问题多多 初入前端孩子的“恶梦”</a></li>
  36.             <li><a href="http://url.cn/ROtfyw" title="(二)Form 表单 问题多多 初入前端孩子的“恶梦”">(二)Form 表单 问题多多 初入前端孩子的“恶梦”</a></li>
  37.             <li><a href="http://url.cn/NooKBd" title="(三)Form 表单 问题多多 初入前端孩子的“恶梦”">(三)Form 表单 问题多多 初入前端孩子的“恶梦”</a></li>
  38.             <li><a href="http://url.cn/MROLfs" title="HTML特殊字符编码对照表">HTML特殊字符编码对照表</a></li>
  39.             <li><a href="http://url.cn/OcQegT" title="HTML标签嵌套规则">HTML标签嵌套规则</a></li>
  40.             <li><a href="http://url.cn/RXOtRn" title="CSS reset重置 CSS重置代码">CSS reset重置 CSS重置代码</a></li>
  41.             <li><a href="http://url.cn/PSuB7D" title="HTML的各个标签的默认样式有哪些">HTML的各个标签的默认样式有哪些</a></li>
  42.             <li><a href="http://url.cn/OvEahR" title="CSS选择器优先级">CSS选择器优先级</a></li>
  43.             <li><a href="http://url.cn/QYYSjf" title="CSS选择器种类以及书写顺序">CSS选择器种类以及书写顺序</a></li>
  44.             <li><a href="http://url.cn/QtM2pf" title="CSS引入方式">CSS引入方式</a></li>
  45.             <li><a href="http://url.cn/NUhSj5" title="CSS important">CSS important</a></li>
  46.         </ul>
  47.         <div></div>
  48.     </div>
  49. </div>
  50. </body>

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

欢迎沟通交流~HTML5学堂

样式代码

  1. <style>
  2. .sidebar{
  3.     width: 160px;
  4.     background: #eef;
  5. }
  6. .sidebar div div{
  7.     height: 50px;
  8.     background: url('../../common/images/add.png') 0 0 no-repeat;
  9.     cursor: pointer;
  10. }
  11. .sidebar h2{
  12.     height: 30px;
  13.     line-height: 30px;
  14.     font-size: 16px;
  15.     font-weight: bold;
  16.     color: #ff92d4;
  17. }
  18. .sidebar ul{
  19.     height: 200px;
  20.     overflow: hidden;
  21. }
  22. .sidebar li{
  23.     height: 20px;
  24.     line-height: 20px;
  25.     font-size: 12px;
  26.     overflow: hidden;
  27. }
  28. .sidebar div .min{
  29.     background: url('../../common/images/minus.png') 0 0 no-repeat;
  30. }
  31. </style>

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

行为代码

  1. <script>
  2. $(function(){
  3.     var judge = true;
  4.     $('.sidebar div div').click(function(){
  5.         var _this = $(this);
  6.         if (judge) {
  7.             var trueHeight = $(this).siblings('ul').children().length;
  8.             _this.siblings('ul').animate({
  9.                 'height' : trueHeight * 20 + 'px'
  10.             }, function(){
  11.                 _this.addClass('min');
  12.                 judge = false;
  13.             });
  14.         } else {
  15.             _this.siblings('ul').animate({
  16.                 'height' : '200px'
  17.             }, function(){
  18.                 _this.removeClass('min');
  19.                 judge = true;
  20.             });
  21.         }
  22.     })
  23. });
  24.     </script>

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

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇:jQuery特效实战开发 - 实例:模块变幻 下一篇:没有了