网站首页
免费技术
源码下载
免费软件
域名空间
活动资讯
值得一看
关于本站
网址导航
您的位置:首页 > 建站知识 > JavaScript版添加间歇停顿滚动公告栏
JavaScript版添加间歇停顿滚动公告栏
2022-9-29    336    0

javascript向上滚动公告、水平滚动公告(翻页效果)在页面中添加滚动公告栏,感兴趣的小伙伴们可以参考一下。
<style>
#dr_list{ padding:10px 0px 10px 30px; border:1px solid #eeeeee; }
.webann{
	background:url(http://www.8gws.com/tool/ad/image/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">
			小辉资源网交流QQ群:97588668 <br />
			朋友们,本站永久免费分享资源,欢迎来访本站!<br />
			请多多支持!你的支持是我更新的动力!<br />
		</div>
	</div>
</div>
<script>
// www.8gws.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>
上一篇: SoftCnKiller流氓软件检测v2.72
下一篇: js实现公告栏效果间歇性滚动展示效果