JavaScript版添加间歇停顿滚动公告栏 [兼容主流浏览器]

更新于:2011.05.11,修改层及样式,并加入DEMO演示。

很久以前就为杨俊伟博客添加了一个公告性质的滚动栏(见首页导航栏下方),最近看到微酷成功的移植到了Zblog上面,先恭喜一下哈!这里我再把代码完整的帖出来,并完善一下代码的相关说明!完整代码如下,也可以在此博文最后的代码框运行看看效果!

<style>
#dr_list{ padding:10px 0px 10px 30px; border:1px solid #eeeeee; }
.webann{
	background:url(http://res.yangjunwei.com/wp-content/themes/Y5/images/notice_ico.gif) no-repeat left top;
	height:20px; line-height:20px; overflow: hidden;/* border: 1px #dddddd dashed;*/
	margin-left:5px; margin-bottom: 0px; padding-left: 30px;
}
</style>
<div id="dr_list">
	<div>
		<div id="ann_box">
			老杨域名主机业务全新上线:http://idc.yangjunwei.com <br />朋友们,五一快乐!好好休息!出个域名:01nv.com<br />最近GG走了,PR也降了,百度却更青睐nuodou了,日志发表10分钟后即收录,加油!<br />
		</div>
	</div>
</div>
<script>
// yangjunwei.com
// Web_Announce:滚动一行停顿3秒,再滚动下一行
function ann_marquee(lh,speed,delay) {
	// 参数:lh为行高line-height,speed为滚动速度,delay为延迟、停顿的时间
	var p=false;
	var t;
	var o=document.getElementById("ann_box");
	o.innerHTML+=o.innerHTML;
	o.style.marginTop=0;
	o.onmouseover=function(){p=true;}
	o.onmouseout=function(){p=false;}
	function start(){
		t=setInterval(scrolling,speed);
		if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
	}

	function scrolling(){
		if(parseInt(o.style.marginTop)%lh!=0){
			o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
			if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
		}else{
			clearInterval(t);
			setTimeout(start,delay);
		}
	}
	setTimeout(start,delay);
}
ann_marquee(20,10,3000);
</script>

上面的代码经过亲测,完美实现各主流浏览器的兼容,已测试浏览器如下:

部分主流浏览器列表

移植说明:

如果你用的是Zblog,只需两步即可完成移植:首先新建一个ANNOUNCE.HTML文件,并将它上传到博客当前主题INCLUDE文件夹下; 其次编辑首页模板default.html,在要显示公告的位置自建标签<#TEMPLATE_INCLUDE_ANNOUNCE#>,就此完成滚动公告的移植步骤。如有疑问可留言或移步 微酷博客,有不错的详解!

当然你也可能用的是其它博客程序或CMS之类的,移植这个滚动公告也简单,可以直接将代码加入页面或通过JS调用,方法是很多的,具体问题具体分析!有问题了请留言,大家讨论一下!

最后就是细节小提醒了,对于具体的公告内容,每一行是用 br 标签来分隔的,要注意的是最后一条内容后也需要用一个br,不然滚动就不能正常循环了哈哈!

本来想再写写代码的移植优化,但想想需要的人可能没有,就不啰嗦了!如果你有不错的想法,可以分享一下哈!

参与评论

  • sealango

    在AS博客中,这个是加在自定义框中吗?
    如果是,那每次修改公告,是不是还要再生成一次静态?

    13年前 (2010-09-04)
    回复
    回复sealango
  • Clyee

    不错啊..

    13年前 (2010-07-03)
    回复
    回复Clyee
  • ubosm

    恭喜

    nuodou 于 2010-7-2 13:38:14 回复

    真是好福气啊!郑州这边都快40度,晚上都没法睡!

    13年前 (2010-07-02)
    回复
    回复ubosm
  • 路人甲

    希望能将这个代码优化下.增加一个关闭的按钮.显示在右侧.
    随时关注豆网.站长看见了注意下这个问题.等待你的新代码

    路人甲 于 2010-7-2 16:41:18 回复

    请把我的QQ通过。我加你了,给你演示

    13年前 (2010-07-02)
    回复
    回复路人甲
  • 股票推荐

    你博客首页的站内搜索和SOSO合作?

    nuodou 于 2010-7-2 13:33:58 回复

    这个是cnzz的站内搜索~~

    13年前 (2010-07-02)
    回复
    回复股票推荐
  • 微酷

    嘎嘎。

    13年前 (2010-07-01)
    回复
    回复微酷
  • 股票推荐

    一直在找的东西,哈哈。准备用。

    nuodou 于 2010-7-1 13:02:44 回复

    你也太快了吧,我说怎么备份数据库的时候提示说无法加载Data.ldb文件,原来是你在提交评论哈哈!能用得上我就没白发布!

    13年前 (2010-07-01)
    回复
    回复股票推荐