您當前位置：首頁 > web前端 > jquery > jQuery 實現連續列表效果

jQuery 實現連續列表效果

來源：程序員人生發布時間：2013-11-07 09:42:13 閱讀次數：3734次

你有沒有手工的編寫過一些重復的代碼？你也覺得它們是如此的無聊吧。好了，這里有更好的解決辦法。這個教程將告訴你如何運用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.jyygyx.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.jyygyx.com/uploads/allimg/091220/step1.png) no-repeat;}#step .item2 {background: url(http://www.jyygyx.com/uploads/allimg/091220/step2.png) no-repeat;}#step .item3 {background: url(http://www.jyygyx.com/uploads/allimg/091220/step3.png) no-repeat;}#step .item4 {background: url(http://www.jyygyx.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.jyygyx.com/uploads/allimg/091220/number1.png) no-repeat;}#number .item2 {background: url(http://www.jyygyx.com/uploads/allimg/091220/number2.png) no-repeat;}#number .item3 {background: url(http://www.jyygyx.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.jyygyx.com/' target='_blank'>http://www.jyygyx.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