您的位置:首页 > Web前端 > JQuery

简单JS实现走马灯效果的文字(无需jQuery)

2009-09-21 03:37 956 查看
效果类似:(抱歉,图片是静态的)





写一段html,需要走马灯上下跳动的内容,但每次只显示一行:

<hr size="0" align="center" style="border-top: 1px solid #F5F5F5;"/>
<div id="marqueebox0" style="overflow: hidden; height: 26px; line-height: 26px; font-size: 14px;">
•
<a href="/"  target="_blank">测试第一行</a>
<br/>
•
<a href="/"  target="_blank">测试第二行</a>
<br/>
•
<a href="/"  target="_blank">测试第三行</a>
<br/>
•
<a href="/"  target="_blank">测试第四行</a>
<br/>
•
<a href="/" target="_blank">测试第五行</a>
<br/>
</div>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

实现走马灯效果的简单JS:

/*开始走马灯*/
function startmarquee(lh/*line-height*/,speed/*50*/,delay/*3000*/,id/*element id*/){
var t;
var p=false;
var o=document.getElementById(id);
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);
}

/*启动效果*/
try{
startmarquee(26,50,3000,"marqueebox0");
}catch(e){}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: