Discuz! 官方站

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 40479|回复: 30

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

[复制链接]
发表于 2012-6-22 23:31:34 | 显示全部楼层 |阅读模式
DIY模块素材
模块类型: 展示类
展示风格: 纯代码
是否原创:
本帖最后由 Honancp 于 2012-7-9 23:17 编辑

先看一下效果图:

今天下午浏览了一下网上的滚动素材,然后想为论坛做一个滚动的公告,捣鼓了好久,为公告的左上角叫上了一个纯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>
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
发表于 2012-6-23 00:18:51 | 显示全部楼层
你的论坛很有WIN8风格哦。。非常好!!~~~

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

使用道具 举报

 楼主| 发表于 2012-6-23 01:46:51 | 显示全部楼层
本帖最后由 Honancp 于 2012-6-23 01:51 编辑
kicny 发表于 2012-6-23 00:18
你的论坛很有WIN8风格哦。。非常好!!~~~

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

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

使用道具 举报

发表于 2012-6-27 17:14:36 | 显示全部楼层
Honancp 发表于 2012-6-23 01:46
呵呵,谢谢,我就是按照WIN8的风格做的,但是还是感觉少了WIN8的灵魂。我把原来放logo的那个层换成了自己 ...

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

使用道具 举报

发表于 2012-6-28 21:15:25 | 显示全部楼层
看不懂 啊················
回复

使用道具 举报

 楼主| 发表于 2012-6-28 21:17:11 | 显示全部楼层
haokebi 发表于 2012-6-28 21:15
看不懂 啊················

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

使用道具 举报

发表于 2012-6-28 21:33:40 | 显示全部楼层
Honancp 发表于 2012-6-28 21:17
加上去就能用的啊...怎么会看不懂呢?

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

使用道具 举报

发表于 2012-7-9 21:06:49 | 显示全部楼层
:lol谢谢分享
回复

使用道具 举报

发表于 2012-8-3 11:49:29 | 显示全部楼层
难得看到一个小清新的网站,我也喜欢科幻,至今都有一套三体
回复

使用道具 举报

头像被屏蔽
发表于 2012-8-3 11:54:43 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

腾讯云市场年终大促!Discuz X3.4论坛系统免费用,虚拟主机低至20元/月,爆款小程序1元起!

QQ|小黑屋|Discuz! 官方站 ( 粤B2-20090059-165 )star

GMT+8, 2019-12-14 04:41

Powered by Discuz! X3.3

Copyright © 2001-2019 Tencent Cloud.

快速回复 返回顶部 返回列表