您的位置：首页 > Web前端 > JavaScript

用javascript代替marquee的滚动字幕效果代码

2008-04-08 12:19 741 查看

1 简单滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--

body {...}{

margin: 0px;

font-size: 12px;

color: #938C43;

line-height: 150%;

text-align:center;

}

a:link{...}{color: #9D943A;font-size:12px;}

a:hover{...}{color: #FF3300;font-size:12px;}

a:visited{...}{color: #9D943A;font-size:12px;}

a.red:link{...}{color: #ff0000;font-size:12px;}

a.red:hover{...}{color: #ff0000;font-size:12px;}

a.red:visited{...}{color: #ff0000;font-size:12px;}

#marqueeBox{...}{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;}

-->

</style>

</head>

<body>

var marqueeContent=new Array();

marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“梦幻密保”快速取回帐号密码</a>";

marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>";

marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>";

marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>";

var marqueeInterval=new Array();

var marqueeId=0;

var marqueeDelay=2000;

var marqueeHeight=20;

function initMarquee() ...{

var str=marqueeContent[0];

document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval('startMarquee()',marqueeDelay)"><div>'+str+'</div></div>');

marqueeId++;

marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);

}

function startMarquee() ...{

var str=marqueeContent[marqueeId];

marqueeId++;

if(marqueeId>=marqueeContent.length) marqueeId=0;

if(document.getElementById("marqueeBox").childNodes.length==1) ...{

var nextLine=document.createElement('DIV');

nextLine.innerHTML=str;

document.getElementById("marqueeBox").appendChild(nextLine);

}

else ...{

document.getElementById("marqueeBox").childNodes[0].innerHTML=str;

document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);

document.getElementById("marqueeBox").scrollTop=0;

}

clearInterval(marqueeInterval[1]);

marqueeInterval[1]=setInterval("scrollMarquee()",20);

}

function scrollMarquee() ...{

document.getElementById("marqueeBox").scrollTop++;

if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1))...{

clearInterval(marqueeInterval[1]);

}

initMarquee();

</script>

</body>

</html>

个人观点：从web可用性角度上讲，我们在采用这段代码的同时要考虑到noscript环境下的可用性，建议将内容还是以下边代码的形式出现在页面中。如：

<div id="newslist">
<ul>
<li><a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“梦幻密保”快速取回帐号密码</a></li>
<li><a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a></li>
<li><a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a></li>
<li><a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a></li>
</ul>
</div>

然后用脚本去设置隐藏，将列表项读进javascript中定义的数组中。即可达到在noscript环境下也能正常看到内容列表。
第二种方法：这个更强，能自动根据内容自动进行左右滚动，解决了宽度太小造成的截取问题。
原文作者：风动人

个人观点：从xhtml的语义化的角度看，页面内容中滥用div标签现象比较严重，可改成ul/li形式。
第三种是最精简的，代码非常少。
原文作者：cityvoice

<html>

<head>

<title> SCROLL </title>

#infozone{...}{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}

#infozone div{...}{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}

</style>

var tc;

window.onload=function()...{

var o=document.getElementById('infozone');hscroll(o);

window.setInterval(function()...{window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},10000);

}

function scrollup(o,d,c)...{

if(d==c)...{

var t=o.firstChild.cloneNode(true);

o.removeChild(o.firstChild);o.appendChild(t);

t.style.marginTop=o.firstChild.style.marginTop='0px';

hscroll(o);

}

else...{

ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);

o.firstChild.style.marginTop=-c+l+'px';

window.setTimeout(function()...{scrollup(o,d,c-l)},50);

}

function hscroll(o)...{

var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;

if(w1<=w2)return;

tc=window.setTimeout(function()...{hs(o,w1-w2,0,w1-w2)},3500);

}

function hs(o,d,c,p)...{

c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';

if(c==d)...{if(d==0)...{tc=window.setTimeout(function()...{hs(o,p,0,p)},2500);}else tc=window.setTimeout(function()...{hs(o,0,-p,p)},3500);}

else tc=window.setTimeout(function()...{hs(o,d,c,p)},5);

}

</script>

</head>

<body>

<div id="infozone"><div>温岚 - 屋顶(周杰伦对唱版)</div><div>范玮琪 - 那些花儿</div><div>张韶涵 - 娃娃</div><div>孙楠&韩红 - 美丽的神话</div></div>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

#newslist{...}{

background:#f7f7f7;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:300px;

}

#contain{...}{

font-size:12px;overflow:hidden;list-style:none;width:300px;height:20px;margin:0px;padding:0;

}

#contain li{...}{

height:20px;line-height:20px;white-space:nowrap;overflow:hidden;

}

</style>

</HEAD>

<BODY>

<li><a href="http:/www.iwcn.net">孙楠&韩红 - 美丽的神话</a></li>

</ul>

</div>

<SCRIPT LANGUAGE="JavaScript">...

function xx()...{

var container=document.getElementById("contain");

container.appendChild(container.firstChild);

}

setInterval("xx()",3000);

</SCRIPT>

</BODY>

</HTML>

本文来自: 脚本之家(www.jb51.net) 详细出处参考：/article/1261636.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航