Discuz X2 DIY模块微博列表滚动代码 华丽效果

这是Discuz X2 DIY模块做的微博滚动显示代码,效果很华丽。见上图。

方法:

一、新建一个【空间类 – > 记录模块】

二、打开模块属性里面的模块模版。

三、把下面代码复制进去保存就OK了。

  1. <style type=“text/css”>
  2. ul,li{list-style:none;}
  3. .wplck{position:relative;height:180px;overflow:hidden;margin:0pxauto;}
  4. .sliderlck{position:absolute;width:98%;}
  5. .fllck{float:left;}
  6. .sliderlckimg{display:block;padding:2px;border:1pxsolid#ccc;}
  7. .sliderlckli{padding:5px0;border-bottom:1pxdashed#ccc;overflow:hidden;width:100%;}
  8. .sliderlckp{font-size:12px;padding-left:46px;color:#666;line-height:18px;}
  9. </style>
  10. <scripttype=“text/javascript”>
  11. functionH$(i){returndocument.getElementById(i)}
  12. functionH$$(c,p){returnp.getElementsByTagName(c)}
  13. varsliderlck=function(){
  14. functioninit(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. varel=H$(this.id),li=H$$(“li”,el),l=li.length;
  25. var_t=li[l-1].offsetHeight;
  26. varcl=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. varlist=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. returninit;
  68. }();
  69. </script>
  70. <divclass=“wplck”>
  71. <ul id=“sliderlck” class=“sliderlck” style=“top:0pt;”>[loop]
  72. <li>
  73. <target=“_blank” href=“home.php?mod=space&uid={uid}” class=“fllck”><img width=“33” height=“33” alt=”{username}” src=“{avatar}”></a>
  74. <p><target=“_blank” title=“{username}” href=“home.php?mod=space&uid={uid}”>{username}</a>:{title}</p>
  75. <p><em class=“xg1xw0”>{dateline}</em><target=“_blank” href=“{url}” style=“color:rgb(110,175,213);”>[回复]</a></p>
  76. </li>
  77. [/loop]</ul>
  78. </div>
  79. <script type=“text/javascript”>
  80. newsliderlck({id:”sliderlck”})
  81. </script>
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇