x2.5diy论坛公告滚动模块

先看一下效果图：

今天下午浏览了一下网上的滚动素材，然后想为论坛做一个滚动的公告，捣鼓了好久，为公告的左上角叫上了一个纯CSS的阴影，整个代码完全没有用图片，用到了CSS3.0和Javascript。经测试完全兼容x2.5.   IE9.0,chrome,firefox上测试正常。
效果演示地址是：http://www.sfnav.com/forum.php进去之后看左侧，很明显的地方。

此代码分为三个部分：CSS样式表，div和javascript。CSS按照你的需要修改，div可以不修改，javascript 部分则完全不需要修改。注意[loop]循环部分的写法，注意要也用这样的格式。此代码没有用到图片，样式表和js都是嵌入在代码内的。
如何使用代码呢？
首先，在合适的地方（宽度325px左右，高度37px左右）diy一个展示类中的公告模块，设置好之后直接将模块模板里的内容全部删除然后换上以下的代码。然后就行了。

附上代码：

1. <style type="text/css">
   
2. .effshadow
   
3. {
   
4.   position: relative;
   
5. }
   
6. .effshadow:after
   
7. {
   
8. z-index: -1;
   
9. position: absolute;
   
10. content: "";
    
11. top: 15px;
    
12. left: 8px;
    
13. right: auto;
    
14. width: 50%;
    
15. height: 10%;
    
16. bottom: 80%;
    
17. max-width: 300px;
    
18.   background: #777;
    
19.   -webkit-box-shadow: 0 15px 10px #777;
    
20.   -moz-box-shadow: 0 15px 10px #777;
    
21.   box-shadow: 0 15px 10px #777;
    
22.   -webkit-transform: rotate(183deg);
    
23.   -moz-transform: rotate(183deg);
    
24.   -o-transform: rotate(183deg);
    
25.   -ms-transform: rotate(183deg);
    
26.   transform: rotate(183deg);
    
27. }  
    
28. .effbox h1{
    
29.         text-align:left;
    
30.         height:25px;
    
31.         line-height:25px;
    
32.         position:relative;
    
33.         top:0px;
    
34.         color:#009ad9;
    
35.         font:20px/1.5 Tahoma,'Microsoft Yahei','Simsun';
    
36.         float:left;
    
37.          margin:0px;
    
38. }
    
39. .effbox h3{
    
40.         text-align:center;
    
41.         position:relative;
    
42.         font:12px/1.5 Tahoma,'Microsoft Yahei','Simsun';
    
43.          margin:0px;
    
44.          height:30px;
    
45. }
    
46. .effbox {
    
47.         width:319px;
    
48.         height:37px;
    
49.         background:#FFF;
    
50. }
    
51. .shadowcon { width:100%; height:25px; margin:6px 5px 6px 10px; overflow:hidden;}
    
52. #rollBox{ height:25px; width:255px; overflow:hidden;list-style:none; margin:0; padding:0; position:relative; padding-left:5px; margin:50px auto; background:#FFf; cursor:pointer;}
    
53. .shadowcon li { list-style:none; line-height:25px; text-align:left;}
    
54. </style>
    
55. <div class="effbox">
    
56. <div class="effbox effshadow">
    
57.         <div class="shadowcon">
    
58.     <h1>公告</h1>
    
59.     <h3>
    
60.     <ul style="margin:5px 0 0 0;" id="rollBox">
    
61.     [loop]
    
62.     <li><a href="{url}" title="{title}"{target}>{title}（{starttime}）</a></li>
    
63.     [/loop]
    
64.     </ul>
    
65.     </h3></div></div></div>
    
66.    <script type="text/javascript">
    
67. var rollText={
    
68.         go:null,
    
69.         oParentUl:null,
    
70.         oUlH:null,
    
71.         liArr:null,
    
72.         childNode:null,
    
73.         timeout:null,
    
74.         run:function(id,delay){
    
75.                 var oLiFirst=this.liArr[0];
    
76.                 var liMarTop = oLiFirst.style.marginTop;
    
77.                 var liTopNum=parseInt(liMarTop);
    
78.                 var c = Math.abs(liTopNum);
    
79.                 if(c< parseInt(this.oUlH)){
    
80.                         c++;
    
81.                         oLiFirst.style.marginTop ='-' + c + 'px';
    
82.                 }else if(Math.abs(liTopNum)== parseInt(this.oUlH)){
    
83.                         clearInterval(this.go);
    
84.                         this.oParentUl.removeChild(oLiFirst);
    
85.                         this.oParentUl.appendChild(oLiFirst);
    
86.                         this.liArr[this.liArr.length-1].style.marginTop='0px';
    
87.                         this.timeout=setTimeout(function(obj,id,childtags,delay){return function(){obj.start(id,childtags,delay);};}(this,id,this.childNode,delay),delay);
    
88.                 }
    
89.                
    
90.         },
    
91.         start:function(id,childtags,delay){
    
92.                
    
93.                 this.childNode=childtags;
    
94.                 this.oParentUl=document.getElementById(id);
    
95.                 this.oUlH=this.oParentUl.currentStyle?this.oParentUl.currentStyle['height']:window.getComputedStyle(this.oParentUl,null)['height'];
    
96.                 this.liArr=this.oParentUl.getElementsByTagName(childtags);
    
97.                 for(var i=0;i<this.liArr.length;i++){
    
98.                         this.liArr[i].style.cssText +=';margin-top:0;height:'+this.oUlH+';line-height:'+this.oUlH+';display:block; width:100%;';
    
99.                         
    
100.                 }
     
101.                 this.go =setInterval(
     
102.                          function(obj,id,delay){
     
103.                         return function(){obj.run(id,delay)}
     
104.                 }(this,id,delay),10);
     
105.                 this.oParentUl.onmouseover=function(obj){return function(){clearTimeout(obj.timeout);clearTimeout(obj.go);};}(this);
     
106.                 this.oParentUl.onmouseout=function(obj){return function(){obj.go =setInterval(function(obj,id,delay){return function(){obj.run(id,delay)};}(obj,id,delay),10);};}(this);
     
107.                
     
108.         }
     
109. }
     
110. rollText.start('rollBox','li',3000);
     
111. function clone(){};
     
112. clone.prototype= rollText;
     
113. </script>

复制代码

你的论坛很有WIN8风格哦。。非常好！！~~~

LOGO做得很好啊。。想知道怎么实现哪样的效果。。。。。你论坛注册不了。

kicny 发表于 2012-6-23 00:18
你的论坛很有WIN8风格哦。。非常好！！~~~

LOGO做得很好啊。。想知道怎么实现哪样的效果。。。。。你 ...

呵呵，谢谢，我就是按照WIN8的风格做的，但是还是感觉少了WIN8的灵魂。我把原来放logo的那个层换成了自己改的一个特效的代码，然后就是那样了。还有，确实，论坛注册不了，验证邮件一直发不过去，不过现在不要验证了。我之前用的是163邮箱来发送验证邮件，但是163一直提示我我发的邮件被怀疑是垃圾邮件，给我退回来了。然后就不能注册了....

Honancp 发表于 2012-6-23 01:46
呵呵，谢谢，我就是按照WIN8的风格做的，但是还是感觉少了WIN8的灵魂。我把原来放logo的那个层换成了自己 ...

能不能教教我怎么搞那个特效哦！~~很绚丽呢！~~~求分享呢。。

看不懂 啊················

haokebi 发表于 2012-6-28 21:15
看不懂 啊················

加上去就能用的啊...怎么会看不懂呢？

Honancp 发表于 2012-6-28 21:17
加上去就能用的啊...怎么会看不懂呢？

en ..我在仔细看。。。。。

:lol谢谢分享

难得看到一个小清新的网站，我也喜欢科幻，至今都有一套三体