Discuz！X任意页面DIY滚动显示论坛帖子[纯DIY 非插件]（更新：2013-04-08）

首先申明：这个是根据之前有人发布的滚动记录（就是空间里的“记录”）修改得到的，并非本人原创。因为网上传的到处都是，所以我也不知道原作者是谁了，如有侵权请斑竹删帖。。。

X2最新演示页（页面右上角）：
http://www.wenliren.com/topic-2012xinsheng.html





之前是记录滚动的效果；

现在只需要修改模块数据里的一些参数，既可以实现对论坛帖子的滚动调用

本站已经使用，详见演示：http://www.wenliren.com/topic-2012xinsheng.html

（我的这个现在调用的是帖子标题+内容，当然，你也可以发挥自己的创造力，修改成只调用标题或者其他。。。）

使用方法：

1.DIY---添加帖子模块---（初步调用自己随便设定，主题、主题+摘要等都可以）
2.将以下代码复制到模块数据里（覆盖掉原来的），保存即可。[高度可以在代码里自己改，第三行，改成你觉得合适的就可以了]

1. <style type="text/css">
   
2. ul,li{list-style:none;}
   
3. .wplck{position:relative;height:462px;overflow:hidden;margin:0px auto; }
   
4. .sliderlck{position:absolute;width:98%;}
   
5. .fllck{float:left;}
   
6. .sliderlck img{display:inline;padding:2px;border:0}
   
7. .sliderlck li{padding:5px 0;border-bottom:1px dashed #ccc;overflow:hidden;width:100%;}
   
8. .sliderlck p{font-size:12px;padding-left:46px;color:#666;line-height:18px;}
   
9. </style>
   
10. <script type="text/javascript">
    
11. function H$(i) {return document.getElementById(i)}
    
12. function H$$(c, p) {return p.getElementsByTagName(c)}
    
13. var sliderlck = function () {
    
14. function init (o) {
    
15. this.id = o.id;
    
16. this.at = o.auto ? o.auto : 3;
    
17. this.o = 0;
    
18. this.pos();
    
19. }
    
20. init.prototype = {
    
21. pos : function () {
    
22. clearInterval(this.__b);
    
23. this.o = 0;
    
24. var el = H$(this.id), li = H$$('li', el), l = li.length;
    
25. var _t = li[l-1].offsetHeight;
    
26. var cl = li[l-1].cloneNode(true);
    
27. cl.style.opacity = 0; cl.style.filter = 'alpha(opacity=0)';
    
28. el.insertBefore(cl, el.firstChild);
    
29. el.style.top = -_t + 'px';
    
30. this.anim();
    
31. },
    
32. anim : function () {
    
33. var _this = this;
    
34. this.__a = setInterval(function(){_this.animH()}, 20);
    
35. },
    
36. animH : function () {
    
37. var _t = parseInt(H$(this.id).style.top), _this = this;
    
38. if (_t >= -1) {
    
39. clearInterval(this.__a);
    
40. H$(this.id).style.top = 0;
    
41. var list = H$$('li',H$(this.id));
    
42. H$(this.id).removeChild(list[list.length-1]);
    
43. this.__c = setInterval(function(){_this.animO()}, 20);
    
44. //this.auto();
    
45. }else {
    
46. var __t = Math.abs(_t) - Math.ceil(Math.abs(_t)*.07);
    
47. H$(this.id).style.top = -__t + 'px';
    
48. }
    
49. },
    
50. animO : function () {
    
51. this.o += 2;
    
52. if (this.o == 100) {
    
53. clearInterval(this.__c);
    
54. H$$('li',H$(this.id))[0].style.opacity = 1;
    
55. H$$('li',H$(this.id))[0].style.filter = 'alpha(opacity=100)';
    
56. this.auto();
    
57. }else {
    
58. H$$('li',H$(this.id))[0].style.opacity = this.o/100;
    
59. H$$('li',H$(this.id))[0].style.filter = 'alpha(opacity='+this.o+')';
    
60. }
    
61. },
    
62. auto : function () {
    
63. var _this = this;
    
64. this.__b = setInterval(function(){_this.pos()}, this.at*1000);
    
65. }
    
66. }
    
67. return init;
    
68. }();
    
69. </script>
    
70. </head>
    
71. 
    
72. <div class="wplck">
    
73. <ul id="sliderlck" class="sliderlck">
    
74. [loop]
    
75. <li>
    
76. <a class="fllck" href="home.php?mod=space&uid={authorid}" {target}><img src="{avatar}" width="33" height="33" alt="{author}" /></a>
    
77. <p><a href="{url}" title="{title}"{target}>{title}</a></p>
    
78. <p><em class="xg1 xw0">{summary}</em> <a style="color:#CCC" href="{url}"{target}>[详细]</a></p>
    
79. </li>
    
80. [/loop]
    
81. </ul>
    
82. </div>
    
83. <script type="text/javascript">
    
84. new sliderlck({id:'sliderlck'})
    
85. </script>

复制代码

PS：代码已经更新与图片演示相同，更新于2013年4月8日。

非常抱歉，之前手误，贴的代码有点小问题，确实不会滚动，已经更新~

我也很菜

有人正打算运用于PW里··

怎么不滚动呀

我试了不滚动呀，怎么办？

把喵叫了个咪  这不一样嘛

有bug？