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

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

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

<style>
#dr_list{ padding:10px 0px 10px 30px; border:1px solid #eeeeee; }
.webann{
	background:url(http://img.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,不然滚动就不能正常循环了哈哈!

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