免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [分享] 熱圖排行榜代碼 [打印本頁]
作者: n7197    時間: 2012-4-26 21:16     標題: 熱圖排行榜代碼

sshot-1.jpg

工具 » 數據調用
添加主題列表

版塊名稱:熱門圖片

顯示數據條數:24

標題最大字節數:32

1680小時內瀏覽次數倒序排序
  1. <script type="text/javascript">
  2. var moveing = false;
  3. function $(id) { return document.getElementById(id); }
  4. function moveElement(elementID,final_x,final_y,interval) {
  5.   if (!document.getElementById) return false;
  6.   if (!document.getElementById(elementID)) return false;
  7.   var elem = document.getElementById(elementID);
  8.   if (elem.movement) {
  9.     clearTimeout(elem.movement);
  10.   }
  11.   if (!elem.style.left) {
  12.     elem.style.left = "0px";
  13.   }
  14.   if (!elem.style.top) {
  15.     elem.style.top = "0px";
  16.   }
  17.   var xpos = parseInt(elem.style.left);
  18.   var ypos = parseInt(elem.style.top);
  19.   if (xpos == final_x && ypos == final_y) {
  20. moveing=false;
  21.     return true;
  22.   }
  23.   if (xpos < final_x) {
  24.     var dist = Math.ceil((final_x - xpos)/10);//Math.ceil求最小的整數，但不小於本身
  25.     xpos = xpos + dist;
  26.   }
  27.   if (xpos > final_x) {
  28.     var dist = Math.ceil((xpos - final_x)/10);
  29.     xpos = xpos - dist;
  30.   }
  31.   if (ypos < final_y) {
  32.     var dist = Math.ceil((final_y - ypos)/10);
  33.     ypos = ypos + dist;
  34.   }
  35.   if (ypos > final_y) {
  36.     var dist = Math.ceil((ypos - final_y)/10);
  37.     ypos = ypos - dist;
  38.   }
  39.   elem.style.left = xpos + "px";
  40.   elem.style.top = ypos + "px";
  41.   var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  42.   elem.movement = setTimeout(repeat,interval);
  43. }
  44. function next(previousBtn,nextBtn,scrollID,highlightID) {
  45. if(moveing) return;
  46. moveing = true;
  47. var vTop = parseInt($(scrollID).style.top);
  48. var vLeft = parseInt($(scrollID).style.left);
  49. if (vLeft <= -2073) return moveing=false;
  50. if(vLeft == -1876) {
  51.   $(nextBtn).className = 'last_btn';
  52. }
  53. var finalLeft = vLeft - 938;
  54. moveElement(scrollID,finalLeft,vTop,5);
  55. $(previousBtn).className = 'previous';
  56. var highLightList = $(highlightID).getElementsByTagName('span');
  57. for (var i=0; i<highLightList.length; i++) {
  58.   if (highLightList[i].className == 'current') {
  59.     var currentNum = i;
  60.   }  
  61. }
  62. highLightList[currentNum].className = '';
  63. highLightList[currentNum+1].className = 'current';
  64. }
  65. function previous(previousBtn,nextBtn,scrollID,highlightID) {
  66. if(moveing) return;
  67. moveing = true;
  68. var vTop = parseInt($(scrollID).style.top);
  69. var vLeft = parseInt($(scrollID).style.left);
  70. if (vLeft >= 0) return moveing=false;
  71. if(vLeft == -938) {
  72.   $(previousBtn).className = 'first_btn';
  73. }
  74. var finalLeft = vLeft + 938;
  75. moveElement(scrollID,finalLeft,vTop,5);
  76. $(nextBtn).className = 'next';
  77. var highLightList = $(highlightID).getElementsByTagName('span');
  78. for (var i=0; i<highLightList.length; i++) {
  79.   if (highLightList[i].className == 'current') {
  80.     var currentNum = i;
  81.   }  
  82. }
  83. highLightList[currentNum].className = '';
  84. highLightList[currentNum-1].className = 'current';
  85. }
  86. </script>
  87. <div id="NO5_picshow_b" style=" position:absolute; left:-999px; top:-999px;"><!--把下面代碼加到<body>與</body>之間-->  
  88. <div class="v">
  89. <div class="v_caption">
  90.   <h2 class="cartoon" title="熱帖排行"><a href="javascript:void(0);" ><font color=red>熱門圖片熱度排行榜</font></a><sup>  </sup></h2>
  91.   <div id="cartoon_highlight" class="highlight_tip"><span class="current">1</span><span>2</span><span>3</span><span>4</span></div>
  92.   <div class="change_btn"><span id="cartoon_previous_btn" class="first_btn" onclick="previous('cartoon_previous_btn','cartoon_next_btn','cartoon_list','cartoon_highlight')">上一页</span><span id="cartoon_next_btn" class="next" onclick="next('cartoon_previous_btn','cartoon_next_btn','cartoon_list','cartoon_highlight')">下一页</span></div>
  93.   <div class="right mintip"><a href="http://szpne.5d6d.com/forum-25.html"><font color=indigo> 更多實用代码>></font> </a></div>
  94. </div>
  95. <div class="v_content">
  96.   <div id="cartoon_list" class="v_content_list" style="top:0px; left:0px;">
  97.    <ul>
  98.     [node]<li><div class="jz_i">
  99. <a href="{link}" title="{message}"><img src="{imgattach}" alt="標題：{subject_full}
  100. 作者：{author_nolink}
  101. 簡介：{message}
  102. 回帖：{lastposter_nolink}
  103. 回覆：{replies}
  104. 熱度：{views}
  105. 發布時間：{dateline}
  106. 最後回覆：{lastpost}
  107. " /></a></div><h4>{subject}</h4><span><font color=red>熱度: </font><em>{views}</em></span></li>[/node]
  108.    </ul>
  109.   </div>
  110. </div>
  111. </div></div>
  112. <script>QInd($("NO5_picshow_t"),$("NO5_picshow_b"));</script>
複製代碼
分類間廣告加入以下代碼
  1. <style type="text/css">
  2. /* 熱帖排行榜設置*/
  3. .v {
  4.     width:950px;
  5.     margin:0px 0 1px 0px;
  6. }
  7. .v_caption {
  8.     height:35px;
  9.     border:#e7e7e7 1px solid;
  10.     position:relative;
  11.     z-index:1;
  12. }
  13. .v_caption h2 {
  14.     float:left;
  15.     width:110px;
  16.     height:35px;
  17.     overflow:hidden;
  18.     background:url(http://www.torfor.com/adcode.gif) no-repeat;
  19.     line-height:34px;
  20.     padding-left:5px;
  21. }
  22. .v_caption .cartoon {
  23.     background-position:0 -100px;
  24. }
  25. .v_caption .variety {
  26.     background-position:-100px -100px;
  27. }
  28. .highlight_tip {
  29.     display:inline;
  30.     float:left;
  31.     margin:14px 0 0 10px;
  32. }
  33. .highlight_tip span {
  34.     display:inline;
  35.     float:left;
  36.     width:7px;
  37.     height:7px;
  38.     overflow:hidden;
  39.     margin:0 2px;
  40.     background:url(http://mm.a.5d6d.com/userdirs/0/1/dieyu/attachments/month_1011/101127000455b5c0a15ddd7d47.gif) no-repeat 0 -320px;
  41.     text-indent:-9999px;
  42. }
  43. .highlight_tip .current {
  44.     background-position:0 -220px;
  45. }
  46. .change_btn {
  47.     float:left;
  48.     margin:7px 0 0 10px;
  49. }
  50. .change_btn span {
  51.     display:block;
  52.     float:left;
  53.     width:30px;
  54.     height:23px;
  55.     overflow:hidden;
  56.     background:url(http://mm.a.5d6d.com/userdirs/0/1/dieyu/attachments/month_1011/101127000455b5c0a15ddd7d47.gif) no-repeat;
  57.     text-indent:-9999px;
  58.     cursor:pointer;
  59. }
  60. .change_btn .previous {
  61.     background-position:0 -400px;
  62. }
  63. .change_btn .next {
  64.     width:31px;
  65.     background-position:-30px -400px;
  66. }
  67. .change_btn .first_btn {
  68.     background-position:0 -500px;
  69.     cursor:default;
  70. }
  71. .change_btn .last_btn {
  72.     background-position:-30px -500px;
  73.     cursor:default;
  74. }
  75. .v_caption em {
  76.     display:inline;
  77.     float:right;
  78.     margin:10px 12px 0 0;
  79.     font-family:simsun;
  80. }
  81. .v_content {
  82.     position:relative;
  83.     width:938px;
  84.     height:180px;
  85.     overflow:hidden;
  86.     border-right:1px solid #E7E7E7;
  87.     border-bottom:1px solid #E7E7E7;
  88.     border-left:1px solid #E7E7E7;
  89.     background:#fff;
  90. }
  91. .v_content_list {
  92.     position:absolute;
  93.     width:3750px;
  94. }
  95. .v_content ul {
  96.     }.v_content ul li {
  97.     display:inline;
  98.     float:left;
  99.     margin:10px 6px 0;
  100.     padding:8px;
  101.     background:url(http://mm.a.5d6d.com/userdirs/0/1/dieyu/attachments/month_1011/101127000198a2667691323b21.gif) no-repeat;
  102.     overflow:hidden;
  103. }
  104. .v_content ul li a {
  105.     width:128px;
  106.     height:80px;
  107.     text-align:center;
  108.     overflow:hidden;
  109. }
  110. .v_content ul li img {
  111.     min-width:128px;
  112.     _width:128px;
  113.     height:80px;
  114.     *height:100%;
  115.     _height:100px;
  116. }
  117. .v_content ul li h4 {
  118.     width:128px;
  119.     height:36px;
  120.     overflow:hidden;
  121.     margin-top:12px;
  122.     font-weight:normal;
  123. }
  124. .v_content ul li h4 a {
  125.     display:inline !important;
  126.     height:auto !important;
  127. }
  128. .v_content ul li span {
  129.     color:#666;
  130. }
  131. .v_content ul li em {
  132.     color:#888;
  133.     font-family:Verdana;
  134.     font-size:0.9em;
  135. }
  136. .jz_i {
  137.     max-width:128px;
  138.     _width:128px;
  139.     height:80px;
  140.     overflow:hidden;
  141.     display:table-cell;
  142.     *font-size:65px;
  143.     vertical-align:middle;
  144.     text-align:center;
  145. }
  146. .jz_i img {
  147.     vertical-align:middle;
  148. }</style>
  149. <div id="NO5_picshow_t"></div>
複製代碼
有空再PO:
鼠標靠近鏈接~彈出縮略圖功能
圖片列表的縮略圖帶箭頭形狀像視頻列表的代碼

打完收工!

圖片附件: sshot-1.jpg (2012-4-26 20:59, 23.47 KB) / 下載次數 1629
http://joinbbs.net/discuz/attachment.php?aid=2382&k=f41701f316f5f5bdbfdf945c970dcfdf&t=1732363400&sid=ijCeds

作者: 8301853    時間: 2012-4-28 09:40

这个不错....支持
作者: sojh    時間: 2012-9-15 16:15

顶！
作者: gogo1266    時間: 2012-9-15 16:18

謝謝分享
作者: liangweisee    時間: 2012-11-14 23:55

谢谢分享！
作者: xqingt    時間: 2012-11-15 10:21

謝謝分享~~
作者: 4rphotoclub    時間: 2012-11-15 10:31

謝謝樓主分享這麼好的東西
作者: 章鱼    時間: 2012-11-15 16:17

这个好像是5D6D的打工者论坛原创的呢



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://joinbbs.net/discuz/) Powered by Discuz! 7.2