滚动公告栏展示插件帝国cms - 安全、强大、稳定、灵活

帝国论坛 → 帝国网站管理系统交流区 → 帝国CMS使用交流 → 滚动公告栏展示插件

【本版专题贴子】

1/3 1 2 3 ›› ›|

亦也
用户头衔：举人

精华贴   ：0
发贴数   ：322
经验值   ：1010
注册时间：2008-01-28

信息

搜索

好友

发送悄悄话

【精益求精－帝国网站管理系统7.5正式版开源发布】 [第 1 楼]

滚动公告栏展示插件

网上源码加以修改

来源于DISCUZ代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gbk">
<style type="text/css">
ul {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
padding-top: 0px
}
#announcement {
width:100%;
background:url(img/menu_bg.gif) repeat;
overflow: hidden;
}
#announcement div {
border: #e6e6e6 1px solid;
padding:0px 10px 0px 10px;
overflow-y:hidden;
line-height: 24px;
height: 24px
}
#announcement li {
font-size: 12px;
float: left;
list-style-type: none;
margin-right: 20px;
padding-left: 10px;
background: url(img/arrow_right.gif) no-repeat 0px 50%;
white-space: nowrap
}
#announcement a {
text-decoration: none;
}
#announcement a:hover {
text-decoration:underline;
}
</style>
</HEAD>
<BODY>
<DIV id=announcement onMouseOver="if(!anncount) {clearTimeout(annst);annst = 0}" onMouseOut="if(!annst) annst = setTimeout('announcementScroll()', anndelay);">
  <DIV id=announcementbody>
<UL>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/0f4ab6defbf1b65fccbf1ada.html" target="_blank">分享个表单验证函数</A>（2008-12-16 05:30 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/d6b9543ddf2739e93d6d9798.html" target="_blank">块级元素和级联元素的含义</A>（2008-12-13 03:39 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/5cc8a31ed1749d1841341796.html" target="_blank">如何设置<span>的width属性且不换行？？</A>（2008-12-13 03:23 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/11bf1b174322d9064a90a788.html" target="_blank">执行javascript后，gif动画就静止了？？</A>（2008-12-13 03:12 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/67424f901f46308aa977a4f5.html" target="_blank">基于栅格地图的查询系统（切片缓存技术）</A>（2008-11-29 07:38 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/b5230933b495d5ff1b4cff78.html" target="_blank">【转】flash和javascript之间的通讯（javascript调用flash中的函数）</A>（2008-11-27 07:45 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/07bad22a214e132ad42af106.html" target="_blank">不使用循环和回调函数输出字符1~100</A>（2008-11-23 03:00 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/acc8421005e1fbfbc2ce795a.html" target="_blank">简洁的js图片等比缩放</A>（2008-11-22 04:54 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/2940948f875a27fd503d9265.html" target="_blank">分贝网音乐地址获取器</A>（2008-11-20 05:19 P.M.）</LI>
</UL>
  </DIV>
</DIV>
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
var anndelay = 3000;
var anncount = 0;
var annheight = 24;
var annst = 0;
function announcementScroll()
{
if( ! annst)
{
   $('announcementbody').innerHTML += '<br style="clear: both" />' + $('announcementbody').innerHTML;
   $('announcementbody').scrollTop = 0;
   if($('announcementbody').scrollHeight > annheight * 3)
   {
      annst = setTimeout('announcementScroll()', anndelay);
   }
   else
   {
      $('announcement').onmouseover = $('announcement').onmouseout = null;
   }
   return;
}
if(anncount == annheight)
{
   if($('announcementbody').scrollHeight - annheight <= $('announcementbody').scrollTop)
   {
      $('announcementbody').scrollTop = $('announcementbody').scrollHeight / 2 - annheight;
   }
   anncount = 0;
   annst = setTimeout('announcementScroll()', anndelay);
}
else
{
   $('announcementbody').scrollTop ++ ;
   anncount ++ ;
   annst = setTimeout('announcementScroll()', 10);
}
}
announcementScroll();
</script>
</BODY>
</HTML>

其中将：

<UL>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/0f4ab6defbf1b65fccbf1ada.html" target="_blank">分享个表单验证函数</A>（2008-12-16 05:30 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/d6b9543ddf2739e93d6d9798.html" target="_blank">块级元素和级联元素的含义</A>（2008-12-13 03:39 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/5cc8a31ed1749d1841341796.html" target="_blank">如何设置<span>的width属性且不换行？？</A>（2008-12-13 03:23 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/11bf1b174322d9064a90a788.html" target="_blank">执行javascript后，gif动画就静止了？？</A>（2008-12-13 03:12 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/67424f901f46308aa977a4f5.html" target="_blank">基于栅格地图的查询系统（切片缓存技术）</A>（2008-11-29 07:38 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/b5230933b495d5ff1b4cff78.html" target="_blank">【转】flash和javascript之间的通讯（javascript调用flash中的函数）</A>（2008-11-27 07:45 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/07bad22a214e132ad42af106.html" target="_blank">不使用循环和回调函数输出字符1~100</A>（2008-11-23 03:00 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/acc8421005e1fbfbc2ce795a.html" target="_blank">简洁的js图片等比缩放</A>（2008-11-22 04:54 P.M.）</LI>
   <LI><A href="http://hi.baidu.com/mimimo/blog/item/2940948f875a27fd503d9265.html" target="_blank">分贝网音乐地址获取器</A>（2008-11-20 05:19 P.M.）</LI>
</UL>

修改用灵动标签调用：

<ul>[e:loop={"select * from [!db.pre!]ecms_info where checked=1 order by newstime desc limit 10",20,24,0}]
<li><a href="<?=$bqsr[titleurl]?>" target="_blank"><?=esub($bqr[title],30)?></a></li>
[/e:loop]</ul>

优化代码：将CSS另外文件调用，新建JS文件将以上JS代码剪切到新的JS文件当中，然后只留下HTML代码插入首页！
（CSS，JS文件不详细说明了，下面是需要插入的HTML代码，栏目部分自行修改）

<DIV id=announcement onMouseOver="if(!anncount) {clearTimeout(annst);annst = 0}" onMouseOut="if(!annst) annst = setTimeout('announcementScroll()', anndelay);">
<DIV id=announcementbody>
<UL>
<ul>[e:loop={"select * from [!db.pre!]ecms_info where checked=1 order by newstime desc limit 10",4,24,0}]
<li><a href="<?=$bqsr[titleurl]?>" target="_blank"><?=esub($bqr[title],30)?></a></li>
[/e:loop]</ul> </UL>
</DIV>
</DIV><script type="text/javascript" src="[!--news.url--]你建立的JS文件路径/js.js"></script>

DISCUZ滚动公告有几种形式，上网百度一下，找源码按以上修改就可以了！