抛砖引玉-图文排行榜

自己改了一个图文的排行榜
支持dzx2.0
直接在diy里调用
代码如下
希望各位大大美化一下或者能放出更好的代码

1. <script type="text/javascript">
   
2. function nTabs(thisObj,Num){
   
3.     if(thisObj.className == "active")return;
   
4.     var tabObj = thisObj.parentNode.id;
   
5.     var tabList = document.getElementById(tabObj).getElementsByTagName("li");
   
6.     for(i=0; i <tabList.length; i++)
   
7.     {
   
8.         if (i == Num)
   
9.         {
   
10.             thisObj.className = "active";
    
11.             document.getElementById(tabObj+"_Content"+i).style.display = "block";
    
12.         }else{
    
13.             tabList[i].className = "normal";
    
14.             document.getElementById(tabObj+"_Content"+i).style.display = "none";
    
15.         }
    
16.     }
    
17. }
    
18. var show_king_id = 1;
    
19. function show_king_list(e,k)
    
20. {
    
21.     if(show_king_id == k) return true;
    
22.         o = document.getElementById("a"+show_king_id);
    
23.         o.className = "bg";
    
24.     e.className = " ";
    
25.     show_king_id = k;
    
26. }
    
27. var show_kinga_id = 1;
    
28. function show_kinga_list(f,l)
    
29. {
    
30.     if(show_kinga_id == l) return true;
    
31.         o = document.getElementById("b"+show_kinga_id);
    
32.         o.className = "bg";
    
33.     f.className = " ";
    
34.     show_kinga_id = l;
    
35. }
    
36. </script>
    
37. <style type="text/css">
    
38. *{
    
39. margin: 0;
    
40. padding: 0;
    
41. }
    
42. body {
    
43. font-size:12px;
    
44. font-family:Arial, Helvetica, sans-serif;
    
45. color:#666666;
    
46. }
    
47. .door_container {
    
48. width:204px; background:#fff; border:1px solid #ccc;
    
49. margin:20px auto;
    
50. }
    
51. .door_container .TabTitle {
    
52. height:30px; margin-bottom:6px;
    
53. }
    
54. .door_container .TabTitle li {
    
55. list-style:none;
    
56. float:left;
    
57. width:100px;
    
58. height:36px;
    
59. cursor:pointer;
    
60. padding-left:2px;
    
61. line-height:28px;
    
62. color:#7c7c7c;
    
63. font-size:14px;
    
64. text-align:center;
    
65. font-weight:bold;
    
66. background:#DDDDDD;
    
67. }
    
68. .door_container .TabTitle .active {
    
69. color:#339966;
    
70. background:#fff;
    
71. }
    
72. .door_container .TabTitle .normal {
    
73. color:#7c7c7c;
    
74. }
    
75. .door_container .TabContent {
    
76. width:198px; background:#fff; padding:3px;
    
77. }
    
78. .none {
    
79. display: none;
    
80. }
    
81. .star{
    
82. width:198px;
    
83. overflow:hidden;
    
84. white-space:nowrap;
    
85. text-overflow:ellipsis;
    
86. }
    
87. .star dl{
    
88. width:198px;
    
89. margin:2px 0;
    
90. float:left;
    
91. }
    
92. .star dl dd{
    
93. float:left;
    
94. margin-left:8px;
    
95. line-height:18px;
    
96. }
    
97. .star dl dt{
    
98. float:left;
    
99. }
    
100. .bg{
     
101. width:198px;
     
102. margin:2px 0;
     
103. background:#e1e1e1;
     
104. float:left;
     
105. }
     
106. .sl01{
     
107. background:#339966;
     
108. margin:15px 5px 0 5px;
     
109. width:25px;
     
110. height:18px;
     
111. padding-top:7px;
     
112. text-align:center;
     
113. font-weight:bold;
     
114. color:#FFF;
     
115. }
     
116. .sl02 img{
     
117. border:1px solid #999999;
     
118. padding:3px;
     
119. }
     
120. .sl03 a{
     
121. 
     
122. text-decoration:underline;
     
123. }
     
124. .sl03 a:hover{
     
125. color:#FF0084;
     
126. text-decoration:none;
     
127. }
     
128. .sl04{
     
129. background:#CCCCCC;
     
130. }
     
131. .sl05{
     
132. color:#FF0084;
     
133. }
     
134. .bg .sl01{
     
135. background:#fff;
     
136. margin:5px 5px 0 5px;
     
137. width:25px;
     
138. height:18px;
     
139. padding-top:7px;
     
140. text-align:center;
     
141. font-weight:bold;
     
142. color:#339966;
     
143. }
     
144. .bg .sl02 img{
     
145. display:none;
     
146. }
     
147. .bg .sl03{
     
148. width:140px;
     
149. }
     
150. .bg .sl04{
     
151. background:#CCCCCC;
     
152. width:155px;
     
153. }
     
154. .bg .sl05{
     
155. display:none;
     
156. }
     
157. </style>
     
158.         <div id=myTab_Content0>
     
159.             <div class="star">
     
160.                         [loop]
     
161.                 <dl id=a1 onmouseover=show_king_list(this,1);>
     
162.                   
     
163.                     <dt class="sl02"><a href="{url}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a><a href="{url}">{title}</a></dt>
     
164.                     <dd class="sl03"></dd>
     
165.                     <dd class="sl04">{dateline}</dd>
     
166.                     <dd class="sl05">{summary}</dd>
     
167.                 </dl>
     
168.                                 [/loop]
     
169.                                 [order=1]
     
170.                 <dl class=bg id=a2 onmouseover=show_king_list(this,2);>
     
171. 
     
172.                     <dt class="sl02"><a href="{url}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></dt>
     
173.                     <dd class="sl03"><a href="{url}">{title}</a></dd>
     
174.                     <dd class="sl04">{dateline}</dd>
     
175.                     <dd class="sl05">{summary}</dd>
     
176.                 </dl>
     
177.                                 [/order]
     
178.                                 [order=2]
     
179.                 <dl class=bg id=a3 onmouseover=show_king_list(this,3);>
     
180.                     
     
181.                     <dt class="sl02"><a href="{url}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></dt>
     
182.                     <dd class="sl03"><a href="{url}">{title}</a></dd>
     
183.                     <dd class="sl04">{dateline}</dd>
     
184.                     <dd class="sl05">{summary}</dd>
     
185.                 </dl>
     
186.                                 [/order]
     
187.                                 [order=3]
     
188.                 <dl class=bg id=a4 onmouseover=show_king_list(this,4);>
     
189.                     
     
190.                     <dt class="sl02"><a href="{url}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></dt>
     
191.                     <dd class="sl03"><a href="{url}">{title}</a></dd>
     
192.                     <dd class="sl04">{dateline}</dd>
     
193.                     <dd class="sl05">{summary}</dd>
     
194.                 </dl>
     
195.                                 [/order]
     
196.                                 [order=4]
     
197.                 <dl class=bg id=a5 onmouseover=show_king_list(this,5);>
     
198.                   
     
199.                     <dt class="sl02"><a href="{url}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></dt>
     
200.                     <dd class="sl03"><a href="{url}">{title}</a></dd>
     
201.                     <dd class="sl04">{dateline}</dd>
     
202.                     <dd class="sl05">{summary}</dd>
     
203.                 </dl>
     
204.                                 [/order]
     
205.                                 [order=5]
     
206.                 <dl class=bg id=a6 onmouseover=show_king_list(this,6);>
     
207.                     
     
208.                     <dt class="sl02"><a href="{url}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></dt>
     
209.                     <dd class="sl03"><a href="{url}">{title}</a></dd>
     
210.                     <dd class="sl04">{dateline}</dd>
     
211.                     <dd class="sl05">{summary}</dd>
     
212.                 </dl>
     
213.                                 [/order]
     
214.                                 [order=6]
     
215.                 <dl class=bg id=a7 onmouseover=show_king_list(this,7);>
     
216.                   
     
217.                     <dt class="sl02"><a href="{url}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></dt>
     
218.                     <dd class="sl03"><a href="{url}">{title}</a></dd>
     
219.                     <dd class="sl04">{dateline}</dd>
     
220.                     <dd class="sl05">{summary}</dd>
     
221.                 </dl>
     
222.                                 [/order]
     
223.                                 [order=7]
     
224.                 <dl class=bg id=a8 onmouseover=show_king_list(this,8);>
     
225. 
     
226.                     <dt class="sl02"><a href="{url}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></dt>
     
227.                     <dd class="sl03"><a href="{url}">{title}</a></dd>
     
228.                     <dd class="sl04">{dateline}</dd>
     
229.                     <dd class="sl05">{summary}</dd>
     
230.                 </dl>
     
231.                                 [/order]
     
232.                                 [order=8]
     
233.                 <dl class=bg id=a9 onmouseover=show_king_list(this,9);>
     
234.                     
     
235.                     <dt class="sl02"><a href="{url}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></dt>
     
236.                     <dd class="sl03"><a href="{url}">{title}</a></dd>
     
237.                     <dd class="sl04">{dateline}</dd>
     
238.                     <dd class="sl05">{summary}</dd>
     
239.                 </dl>
     
240.                                 [/order]
     
241.                                 [order=9]
     
242.                 <dl class=bg id=a10 onmouseover=show_king_list(this,10);>
     
243.                     
     
244.                     <dt class="sl02"><a href="{url}"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></dt>
     
245.                     <dd class="sl03"><a href="{url}">{title}</a></dd>
     
246.                     <dd class="sl04">{dateline}</dd>
     
247.                     <dd class="sl05">{summary}</dd>
     
248.                 </dl>
     
249.                                 [/order]
     
250.                                
     
251.             </div>
     
252.         </div>

复制代码

还有很多多余代码没有清理请自行清理

顶lz 看了看，没看懂。