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>