向上滚动公告（原）

eoasis

于 2010-05-21 12:15:20 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签：公告百度 JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/eoasis/article/details/83632269

Javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的使用JavaScript实现的滚动公告栏代码示例。该公告栏可以显示多个网站链接，并通过定时器控制向上滚动效果，当鼠标悬停时停止滚动，移开后继续滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

向上滚动公告

<script language="javascript">
var sIndexinfo = [['http://www.baidu.com/','百度网'],['http://www.sina.com.com/','新浪网'],['http://www.sohu.com/','搜狐网']];
function buildAdHtml(info){
var _html = "<div style='overflow:hidden;height:20px;line-height:20px;font-size:12px' id='marqueebox0'>";
    for(var i=0 ;i<info.length;i++){
        _html += "<a href='"+unescape(info[i][0])+"' target='blank'><b>"+unescape(info[i][1])+"</b></a><br>";
    }
    _html += "</div>";
    return _html;
}
document.write(buildAdHtml(sIndexinfo));

function startmarquee(lh,speed,delay,index){
var t;
var p=false;
var o=document.getElementById("marqueebox"+index);
o.innerHTML+=o.innerHTML;
o.onmouseover=function(){p=true}
o.onmouseout=function(){p=false}
o.scrollTop = 0;
function start(){
t=setInterval(scrolling,speed);
if(!p) o.scrollTop += 2;
}
function scrolling(){
if(o.scrollTop%lh!=0){
o.scrollTop += 2;
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
}else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
startmarquee(20,50,5000,0); 
  
</script>