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

2020-05-12 我要评论

由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了，至于不明白为什么不直接用marquee标签的朋友，不妨先阅读一下这篇文章。
第一种方法：用javascript模拟marquee的做法。
出处：网易游戏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>热点新闻</title> 
<style type="text/css"> 
 
</style> 
</head>

<body> 
<h4>滚动新闻</h4> 
<script language="JavaScript" type="text/javascript"> 
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.comhttps://img.qb5200.com/download-x/download/wallpaper.htm target=_blank>最新壁纸下载</a>"; 
marqueeContent[3]="<a href=http://xyq.163.comhttps://img.qb5200.com/download-x/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><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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

个人观点：从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.comhttps://img.qb5200.com/download-x/download/wallpaper.htm target=_blank>最新壁纸下载</a></li>
<li><a href=http://xyq.163.comhttps://img.qb5200.com/download-x/download/around.htm target=_blank>最新屏保下载</a></li>
</ul>
</div>

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

<html> 
<head> 
<title> SCROLL </title> 
<style type="text/css"> 
#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> 
<script type="text/javascript"> 
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); 
}

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

个人观点：从xhtml的语义化的角度看，页面内容中滥用div标签现象比较严重，可改成ul/li形式。

第三种是最精简的，代码非常少。
原文作者：cityvoice

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
 <HEAD> 
  <TITLE> New Document </TITLE> 
  <META NAME="Generator" CONTENT="EditPlus"> 
  <META NAME="Author" CONTENT=""> 
  <META NAME="Keywords" CONTENT=""> 
  <META NAME="Description" CONTENT=""> 
  <style type="text/css"> 
    #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> 
    <div> 
        <ul id="contain"> 
            <li><a href="http:/www.iwcn.net">温岚 - 屋顶(左右摆动)</a></li> 
            <li><a href="http:/www.iwcn.net">范玮琪 - 那些花儿</a></li> 
            <li><a href="http:/www.iwcn.net">张韶涵 - 娃娃</a></li> 
            <li><a href="http:/www.iwcn.net">孙楠&韩红 - 美丽的神话</a></li> 
            <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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

个人观点：太短小精干了，如果你喜欢简单的话，这个也可以考虑的。

实现div可编辑的常见方法总结

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

相关文章

猜您喜欢

今日热门