您當(dāng)前位置：首頁(yè) > web前端 > jquery > jQuery 實(shí)現(xiàn)連續(xù)列表效果

jQuery 實(shí)現(xiàn)連續(xù)列表效果

來源：程序員人生發(fā)布時(shí)間：2013-11-07 09:42:13 閱讀次數(shù)：3724次

你有沒有手工的編寫過一些重復(fù)的代碼？你也覺得它們是如此的無聊吧。好了，這里有更好的解決辦法。這個(gè)教程將告訴你如何運(yùn)用jQuery添加連續(xù)的CSS類生成一個(gè)生動(dòng)的列表。第二個(gè)示例是如何運(yùn)用jQuery的prepend特性為留言列表添加一個(gè)留言計(jì)數(shù)。

可以先看看示例：

<!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.vxbq.cn/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 實(shí)現(xiàn)連續(xù)列表效果 - 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.vxbq.cn/uploads/allimg/091220/step1.png) no-repeat;}#step .item2 {background: url(http://www.vxbq.cn/uploads/allimg/091220/step2.png) no-repeat;}#step .item3 {background: url(http://www.vxbq.cn/uploads/allimg/091220/step3.png) no-repeat;}#step .item4 {background: url(http://www.vxbq.cn/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.vxbq.cn/uploads/allimg/091220/number1.png) no-repeat;}#number .item2 {background: url(http://www.vxbq.cn/uploads/allimg/091220/number2.png) no-repeat;}#number .item3 {background: url(http://www.vxbq.cn/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>你有沒有手工的編寫過一些重復(fù)的代碼？你也覺得它們是如此的無聊吧。好了，這里有更好的解決辦法。這個(gè)教程將告訴你如何運(yùn)用jQuery添加連續(xù)的CSS類生成一個(gè)生動(dòng)的列表。第二個(gè)示例是如何運(yùn)用jQuery的prepend特性為留言列表添加一個(gè)留言計(jì)數(shù)。 </p></li><li><h3>jQuery</h3><p>下載jQuery，在<head>標(biāo)簽之間如下添加jQuery代碼 </p></li><li><h3>CSS 樣式</h3><p>相應(yīng)的運(yùn)用背景圖片樣式化<li>元素。(step1.png, step2.png, step3.png等等）。</p></li><li><h3>最后</h3><p>你也可以運(yùn)用這種技巧添加有序的內(nèi)容，運(yùn)用jQuery的prepend方法。下面就采用此種方法生成計(jì)數(shù)的留言列表。</p></li></ol><ol id="number"><li><h3>學(xué)院</h3><p>網(wǎng)主要有網(wǎng)頁(yè)設(shè)計(jì)、WEB開發(fā)、網(wǎng)站運(yùn)營(yíng)與互聯(lián)網(wǎng)新聞等內(nèi)容，為個(gè)人網(wǎng)站的發(fā)展提供網(wǎng)頁(yè)素材模板與學(xué)習(xí)教程，是草根站長(zhǎng)、程序員、網(wǎng)頁(yè)設(shè)計(jì)師等交流與學(xué)習(xí)的IT類網(wǎng)站。</p></li><li><h3>論壇</h3><p>主要致力于軟件編程與開發(fā),產(chǎn)品有：LieHuoWMS、QQ、系列軟件，同時(shí)有電腦、手機(jī)、建站、數(shù)碼、娛樂、各類破解軟件與注冊(cè)機(jī)等交流,論壇 LieHuoBBS - 軟件官方論壇，菜鳥級(jí)IT技術(shù)交流社區(qū)!</p></li><li><h3>站長(zhǎng)工具</h3><p>網(wǎng)站管理員工具提供站長(zhǎng)查詢,是為廣大中文建站提供的SEO搜索引擎優(yōu)化站長(zhǎng)工具，同時(shí)有IP查詢、手機(jī)查詢等多種實(shí)用工具,網(wǎng)為網(wǎng)站設(shè)計(jì)、開發(fā)與運(yùn)營(yíng)提供動(dòng)力！</p></li></ol><ol id="commentlist"><li><p><cite>網(wǎng)友:</cite></p><p class="time">10:59 2009-12-20</p><p>非常不錯(cuò)，我是一個(gè)網(wǎng)頁(yè)愛好者，同時(shí)是一名站長(zhǎng)，經(jīng)常到網(wǎng)來學(xué)習(xí)！</p></li><li><p><cite>網(wǎng)友:</cite></p><p class="time">11:00 2009-12-20</p><p>真的很不錯(cuò)，我會(huì)永遠(yuǎn)支持的發(fā)展！</p></li><li><p><cite>網(wǎng)友:</cite></p><p class="time">11:00 2009-12-20</p><p>每一分勞動(dòng)都會(huì)有收獲，讓我們一起營(yíng)造良好的學(xué)習(xí)和交流環(huán)境！</p></li></ol></body></html><br /><center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁(yè)，更多網(wǎng)頁(yè)代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運(yùn)行!

1a.添加jQuery代碼

下載jQuery，在<head>標(biāo)簽之間如下添加jQuery代碼：

jQuery將如下輸出html源碼：

list-output-code

1b.CSS編碼

相應(yīng)的運(yùn)用背景圖片樣式化<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