DIY仿新浪微博广场记录动态滚动，渐变滚动效果，让网友互动起来

大家要看演示的进我的演示站看吧
丝女郎http://www.sinvlang.com/forum.php

截图如下。是滚动的。截图只是静态图片。具体要看演示

DIY仿新浪微博广场记录动态滚动
看到一网友在秀他的的记录滚动，于是自己便弄了一个。方便 大家去调用。由于 是滚动动画形式的。截图不好演示

DYI插入以下代码即可，

1. <style type="text/css">
   
2. 
   
3. ul,li{margin:0;padding:0;list-style:none;}
   
4. 
   
5. .wplck{position:relative;height:100px;overflow:hidden;margin:0px auto;border:4px }
   
6. 
   
7. .sliderlck{position:absolute;width:95%;padding:0 10px;left:0;top:0;}
   
8. 
   
9. .fllck{float:left;}
   
10. 
    
11. .sliderlck img{display:block;padding:2px;border:1px solid #ccc;}
    
12. 
    
13. .sliderlck li{padding:6px 0;border-bottom:1px dashed #ccc;overflow:hidden;width:100%;}
    
14. 
    
15. .sliderlck p{font-size:10px;margin:0;padding-left:46px;color:#333;line-height:18px;}
    
16. 
    
17. </style>
    
18. 
    
19. <script type="text/javascript">
    
20. 
    
21. function H$(i) {return document.getElementById(i)}
    
22. 
    
23. function H$(c, p) {return p.getElementsByTagName(c)}
    
24. 
    
25. var sliderlck = function () {
    
26. 
    
27.         function init (o) {
    
28. 
    
29.                 this.id = o.id;
    
30. 
    
31.                 this.at = o.auto ? o.auto : 3;
    
32. 
    
33.                 this.o = 0;
    
34. 
    
35.                 this.pos();
    
36. 
    
37.         }
    
38. 
    
39.         init.prototype = {
    
40. 
    
41.                 pos : function () {
    
42. 
    
43.                         clearInterval(this.__b);
    
44. 
    
45.                         this.o = 0;
    
46. 
    
47.                         var el = H$(this.id), li = H$('li', el), l = li.length;
    
48. 
    
49.                         var _t = li[l-1].offsetHeight;
    
50. 
    
51.                         var cl = li[l-1].cloneNode(true);
    
52. 
    
53.                         cl.style.opacity = 0; cl.style.filter = 'alpha(opacity=0)';
    
54. 
    
55.                         el.insertBefore(cl, el.firstChild);
    
56. 
    
57.                         el.style.top = -_t + 'px';
    
58. 
    
59.                         this.anim();
    
60. 
    
61.                 },
    
62. 
    
63.                 anim : function () {
    
64. 
    
65.                         var _this = this;
    
66. 
    
67.                         this.__a = setInterval(function(){_this.animH()}, 20);
    
68. 
    
69.                 },
    
70. 
    
71.                 animH : function () {
    
72. 
    
73.                         var _t = parseInt(H$(this.id).style.top), _this = this;
    
74. 
    
75.                         if (_t >= -1) {
    
76. 
    
77.                                 clearInterval(this.__a);
    
78. 
    
79.                                 H$(this.id).style.top = 0;
    
80. 
    
81.                                 var list = H$('li',H$(this.id));
    
82. 
    
83.                                 H$(this.id).removeChild(list[list.length-1]);
    
84. 
    
85.                                 this.__c = setInterval(function(){_this.animO()}, 20);
    
86. 
    
87.                                 //this.auto();
    
88. 
    
89.                         }else {
    
90. 
    
91.                                 var __t = Math.abs(_t) - Math.ceil(Math.abs(_t)*.07);
    
92. 
    
93.                                 H$(this.id).style.top = -__t + 'px';
    
94. 
    
95.                         }
    
96. 
    
97.                 },
    
98. 
    
99.                 animO : function () {
    
100. 
     
101.                         this.o += 2;
     
102. 
     
103.                         if (this.o == 100) {
     
104. 
     
105.                                 clearInterval(this.__c);
     
106. 
     
107.                                 H$('li',H$(this.id))[0].style.opacity = 1;
     
108. 
     
109.                                 H$('li',H$(this.id))[0].style.filter = 'alpha(opacity=100)';
     
110. 
     
111.                                 this.auto();
     
112. 
     
113.                         }else {
     
114. 
     
115.                                 H$('li',H$(this.id))[0].style.opacity = this.o/100;
     
116. 
     
117.                                 H$('li',H$(this.id))[0].style.filter = 'alpha(opacity='+this.o+')';
     
118. 
     
119.                         }
     
120. 
     
121.                 },
     
122. 
     
123.                 auto : function () {
     
124. 
     
125.                         var _this = this;
     
126. 
     
127.                         this.__b = setInterval(function(){_this.pos()}, this.at*1000);
     
128. 
     
129.                 }
     
130. 
     
131.         }
     
132. 
     
133.         return init;
     
134. 
     
135. }();
     
136. 
     
137. </script>
     
138. 
     
139. <div class="wplck">
     
140. 
     
141.         <ul id="sliderlck" class="sliderlck">[loop]<li>
     
142. 
     
143. <a class="fllck" href="home.php?mod=space&uid={uid}"  target="_blank"><img src="{avatar}" width="33" height="33" alt="{username}" /></a>
     
144. 
     
145. <p><a href="home.php?mod=space&uid={uid}"  target="_blank">{username}</a>：{title}</p>
     
146. 
     
147. <p><em class="xg1 xw0">{dateline}</em> <a style="color:#6EAFD5" href="{url}" target="_blank">[回复]</a>
     
148. 
     
149. </li>[/loop]</ul>
     
150. 
     
151. </div>
     
152. 
     
153. <script type="text/javascript">
     
154. 
     
155. new sliderlck({id:'sliderlck'})
     
156. 
     
157. </script>

复制代码

:$

没看到滚动哦

没看到滚动哦

我也是没看到滚动 www.gogoyn.com

我试了，错误！！调不出来！！