Discuz! 官方站

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
楼主: Honancp

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

[复制链接]
 楼主| 发表于 2012-12-10 23:20:34 | 显示全部楼层
zxy280 发表于 2012-12-9 20:19
这个我用了。
我希望能压缩代码啊……

这个只能你自己压缩啦~我不太懂javascript,代码不知道怎么精简了。CSS的话估计没啥空间了。
回复

使用道具 举报

发表于 2012-12-10 23:29:46 | 显示全部楼层
我就是精简了你的css的代码。
www.ceczyz.com
回复

使用道具 举报

 楼主| 发表于 2012-12-11 14:58:02 | 显示全部楼层
zxy280 发表于 2012-12-10 23:29
我就是精简了你的css的代码。
www.ceczyz.com

哈哈,发上来看看吧,学习学习~
回复

使用道具 举报

发表于 2012-12-11 22:23:03 | 显示全部楼层
  1. <style type="text/css">

  2. .shadowcon { width:100%; height:25px; margin:6px 5px 6px 10px; overflow:hidden;}
  3. #rollBox{ height:25px; width:100%; overflow:hidden;list-style:none; margin:0; padding:0; position:relative; padding-left:5px; margin:50px auto; background:#FFf; cursor:pointer;}
  4. .shadowcon li { list-style:none; line-height:25px; text-align:left;}
  5. </style>
  6.         <div class="shadowcon">

  7.     <ul id="rollBox" style="margin:5px 0 0 0;" name="rollBox">
  8.     [loop]
  9.     <li> <img alt="公告" src="http://www.ceczyz.com/images/web/index/gb.gif" width="15px" height="15px"><strong>网站公告:</strong><a href="{url}" title="{title}"{target}>{title}({starttime})</a></li>
  10.     [/loop]
  11.     </ul>
  12. </div>
  13.    <script type="text/javascript">
  14. var rollText={
  15.         go:null,
  16.         oParentUl:null,
  17.         oUlH:null,
  18.         liArr:null,
  19.         childNode:null,
  20.         timeout:null,
  21.         run:function(id,delay){
  22.                 var oLiFirst=this.liArr[0];
  23.                 var liMarTop = oLiFirst.style.marginTop;
  24.                 var liTopNum=parseInt(liMarTop);
  25.                 var c = Math.abs(liTopNum);
  26.                 if(c< parseInt(this.oUlH)){
  27.                         c++;
  28.                         oLiFirst.style.marginTop ='-' + c + 'px';
  29.                 }else if(Math.abs(liTopNum)== parseInt(this.oUlH)){
  30.                         clearInterval(this.go);
  31.                         this.oParentUl.removeChild(oLiFirst);
  32.                         this.oParentUl.appendChild(oLiFirst);
  33.                         this.liArr[this.liArr.length-1].style.marginTop='0px';
  34.                         this.timeout=setTimeout(function(obj,id,childtags,delay){return function(){obj.start(id,childtags,delay);};}(this,id,this.childNode,delay),delay);
  35.                 }
  36.                
  37.         },
  38.         start:function(id,childtags,delay){
  39.                
  40.                 this.childNode=childtags;
  41.                 this.oParentUl=document.getElementById(id);
  42.                 this.oUlH=this.oParentUl.currentStyle?this.oParentUl.currentStyle['height']:window.getComputedStyle(this.oParentUl,null)['height'];
  43.                 this.liArr=this.oParentUl.getElementsByTagName(childtags);
  44.                 for(var i=0;i<this.liArr.length;i++){
  45.                         this.liArr[i].style.cssText +=';margin-top:0;height:'+this.oUlH+';line-height:'+this.oUlH+';display:block; width:100%;';
  46.                         
  47.                 }
  48.                 this.go =setInterval(
  49.                          function(obj,id,delay){
  50.                         return function(){obj.run(id,delay)}
  51.                 }(this,id,delay),10);
  52.                 this.oParentUl.onmouseover=function(obj){return function(){clearTimeout(obj.timeout);clearTimeout(obj.go);};}(this);
  53.                 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);
  54.                
  55.         }
  56. }
  57. rollText.start('rollBox','li',3000);
  58. function clone(){};
  59. clone.prototype= rollText;
  60. </script>
复制代码

这是效果图
演示:www.ceczyz.com
代码在上面

本帖子中包含更多资源

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

x
回复

使用道具 举报

发表于 2012-12-12 13:32:12 | 显示全部楼层
还不错.```可以试试去
回复

使用道具 举报

发表于 2013-1-23 16:22:12 | 显示全部楼层
很好的代码
回复

使用道具 举报

发表于 2013-3-28 22:57:31 | 显示全部楼层
后面加了几个英文单词,不知道如何取消。青海教育网www.qhjiaoyu.net 需要您前来指导,谢谢。
回复

使用道具 举报

发表于 2013-4-7 00:06:22 | 显示全部楼层
本帖最后由 demonelf 于 2013-4-7 00:09 编辑

非常感谢 很强大{:soso__16649109216628504391_5:}

www.madhex.com
回复

使用道具 举报

发表于 2013-6-12 13:23:37 | 显示全部楼层
为什么我用了后,短的标题后面有{starttime}标签?
回复

使用道具 举报

发表于 2013-7-23 14:31:34 | 显示全部楼层
这个不错,来学习下
回复

使用道具 举报

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

本版积分规则

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

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

GMT+8, 2019-12-11 21:19

Powered by Discuz! X3.3

Copyright © 2001-2019 Tencent Cloud.

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