您当前位置：首页 > web前端 > jquery > jQuery 实现连续列表效果

jQuery 实现连续列表效果

来源：程序员人生发布时间：2013-11-07 09:42:13 阅读次数：3538次

你有没有手工的编写过一些重复的代码？你也觉得它们是如此的无聊吧。好了，这里有更好的解决办法。这个教程将告诉你如何运用jQuery添加连续的CSS类生成一个生动的列表。第二个示例是如何运用jQuery的prepend特性为留言列表添加一个留言计数。

可以先看看示例：

<!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=GBK" /><script type="text/javascript" src="http://www.wfuyu.com/uploads/Common/jquery-1.3.2.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#step li").each(function (i) {i = i+1;$(this).addClass("item"+i);});$("#number li").each(function (i) {i = i+1;$(this).addClass("item"+i);});$("#commentlist li").each(function (i) {i = i+1;$(this).prepend('<span class="commentnumber"> #'+i+'</span>');});});</script><title>jQuery 实现连续列表效果 - Liehuo.net</title><style type="text/css">body {width: 500px;margin: 20px auto;color: #999;font: 90%/150% Arial, Helvetica, sans-serif;}* {margin: 0;padding: 0;}a {color: #333;}/* step style */#step {margin: 10px 0 40px;padding: 0;}#step li {padding: 3px 0 6px 110px;margin: 0 0 20px;list-style: none;}#step h3 {font: bold 200%/100% Arial, Helvetica, sans-serif;margin: 0 0 5px;color: #666;}#step .item1 {background: url(http://www.wfuyu.com/uploads/allimg/091220/step1.png) no-repeat;}#step .item2 {background: url(http://www.wfuyu.com/uploads/allimg/091220/step2.png) no-repeat;}#step .item3 {background: url(http://www.wfuyu.com/uploads/allimg/091220/step3.png) no-repeat;}#step .item4 {background: url(http://www.wfuyu.com/uploads/allimg/091220/step4.png) no-repeat;}/* number style */#number {margin: 10px 0 40px;padding: 0;}#number li {padding: 3px 0 6px 55px;margin: 0 0 20px;list-style: none;}#number h3 {font: bold 170%/110% Arial, Helvetica, sans-serif;margin: 3px 0 5px;color: #666;}#number .item1 {background: url(http://www.wfuyu.com/uploads/allimg/091220/number1.png) no-repeat;}#number .item2 {background: url(http://www.wfuyu.com/uploads/allimg/091220/number2.png) no-repeat;}#number .item3 {background: url(http://www.wfuyu.com/uploads/allimg/091220/number3.png) no-repeat;}/* number style */#commentlist {margin: 10px 0 40px;padding: 0;}#commentlist li {padding: 10px 0 20px;list-style: none;border-top: solid 1px #ccc;position: relative;}#commentlist cite {font: bold 140%/110% Arial, Helvetica, sans-serif;color: #666;}#commentlist .time {color: #ccc;margin: 0 0 10px;}#commentlist .commentnumber {position: absolute;right: 0;top: 8px;font: normal 200%/100% Georgia, "Times New Roman", Times, serif;color: #ccc;}</style></head><body><ol id="step"><li><h3>开始</h3><p>你有没有手工的编写过一些重复的代码？你也觉得它们是如此的无聊吧。好了，这里有更好的解决办法。这个教程将告诉你如何运用jQuery添加连续的CSS类生成一个生动的列表。第二个示例是如何运用jQuery的prepend特性为留言列表添加一个留言计数。 </p></li><li><h3>jQuery</h3><p>下载jQuery，在<head>标签之间如下添加jQuery代码 </p></li><li><h3>CSS 样式</h3><p>相应的运用背景图片样式化<li>元素。(step1.png, step2.png, step3.png等等）。</p></li><li><h3>最后</h3><p>你也可以运用这种技巧添加有序的内容，运用jQuery的prepend方法。下面就采用此种方法生成计数的留言列表。</p></li></ol><ol id="number"><li><h3>学院</h3><p>网主要有网页设计、WEB开发、网站运营与互联网新闻等内容，为个人网站的发展提供网页素材模板与学习教程，是草根站长、程序员、网页设计师等交流与学习的IT类网站。</p></li><li><h3>论坛</h3><p>主要致力于软件编程与开发,产品有：LieHuoWMS、QQ、系列软件，同时有电脑、手机、建站、数码、娱乐、各类破解软件与注册机等交流,论坛 LieHuoBBS - 软件官方论坛，菜鸟级IT技术交流社区!</p></li><li><h3>站长工具</h3><p>网站管理员工具提供站长查询,是为广大中文建站提供的SEO搜索引擎优化站长工具，同时有IP查询、手机查询等多种实用工具,网为网站设计、开发与运营提供动力！</p></li></ol><ol id="commentlist"><li><p><cite>网友:</cite></p><p class="time">10:59 2009-12-20</p><p>非常不错，我是一个网页爱好者，同时是一名站长，经常到网来学习！</p></li><li><p><cite>网友:</cite></p><p class="time">11:00 2009-12-20</p><p>真的很不错，我会永远支持的发展！</p></li><li><p><cite>网友:</cite></p><p class="time">11:00 2009-12-20</p><p>每一分劳动都会有收获，让我们一起营造良好的学习和交流环境！</p></li></ol></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

1a.添加jQuery代码

下载jQuery，在<head>标签之间如下添加jQuery代码：

jQuery将如下输出html源码：

list-output-code

1b.CSS编码

相应的运用背景图片样式化<li>元素。(step1.png, step2.png, step3.png等等）。

#step .item1 {
background: url(step1.png) no-repeat;
}
#step .item2 {
background: url(step2.png) no-repeat;
}
#step .item3 {
background: url(step3.png) no-repeat;
}

step-list