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

更新时间：2007年10月25日 11:46:29 作者：

由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了
之所以抛弃marquee是因为marquee是一个严重影响用户体验的东西，你把数十行内容压缩到几行滚动的确帮助你压缩了排版空间，但你有没有想过用户可能因为想阅读其中一两行的内容而不得不在你这个滚动上等半天？就以经典论坛页面上部“BlogBeta 数字引擎p4 3.0服务器只要6999元/年”广告文字右边的聚合文字滚动为例，你觉得这是一个很好的用户体验么？W3C的专家们难道还不如一群无知的小p孩考虑的周全？简直是笑话
第一种方法：用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.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>

[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.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环境下也能正常看到内容列表。

第二种方法：这个更强，能自动根据内容自动进行左右滚动，解决了宽度太小造成的截取问题。
原文作者：风动人

<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); } 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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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

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

<!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 id="newslist">          <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需再刷新一下页面才能执行]

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

您可能感兴趣的文章:

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

js实现有趣的倒计时效果
这篇文章主要为大家详细介绍了js实现有趣的倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
javascript设计模式 – 策略模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 策略模式,结合实例形式分析了javascript策略模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
2020-04-04
JavaScript设计模式之享元模式实例详解
这篇文章主要介绍了JavaScript设计模式之享元模式,结合实例形式较为详细的分析了javascript享元模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
2019-01-01
input 禁止输入特殊字符的四种实现方式
某些特殊字符传入后台会产生错误，可能导致sql注入，所以要想法从根本上拦截，接下来通过本文给大家介绍input 禁止输入特殊字符的方式，对input 禁止特殊字符知识感兴趣的朋友一起看下吧
2016-08-08
微信小程序日期选择器实例代码
本文通过一段实例代码给大家介绍了微信小程序日期选择器的实现思路，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-07-07
输入框点击时边框变色效果的实现方法
下面小编就为大家带来一篇输入框点击时边框变色效果的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
2016-12-12
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
这篇文章主要介绍了基于layer.js实现收货地址弹框选择然后返回相应的地址信息,需要的朋友可以参考下
2017-05-05
js的offsetleft属性的用法小结
本文主要介绍了js的offsetleft属性的用法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
table insertRow、deleteRow定义和用法总结
这篇文章主要对table insertRow、deleteRow定义和用法做下总结,需要的朋友可以参考下
2014-05-05
js中substring使用示例详解
substring是从中截取一段字符串,在组成一个新的字符串,这篇文章主要介绍了js中substring使用示例小结,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
2024-01-01