博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

符合WEB标准的滚动文字特效的实现方法

Posted on 2009-04-01 13:10  linFen  阅读(699)  评论(0编辑  收藏  举报

由于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>热点新闻webjx.com</title>
<style type="text/css">
<!--
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>
<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]);
 }
}
initMarq<div><font color=#999999 title="第一页"><font face="webdings">9</font></font>
<font color=#999999 title="上十页"><font face="webdings">7</font></font>
<font color=#999999 title="上一页"><font face="webdings">3</font></font>
<b>1</b>
<a href="./142220269IF5J4C4E387110_2.html">2</a>
<a href="./142220269IF5J4C4E387110_3.html">3</a>
 <a href="./142220269IF5J4C4E387110_2.html" title="下一页"><font face="webdings">4</font></a>
 <font color=#999999  title="下十页"><font face="webdings">8</font></font>
<a href="./142220269IF5J4C4E387110_3.html" title="尾页"><font face="webdings">:</font></a>
</div></div>

<div class="ad_613x60"><a href="Http://www.qkeer.com/" rel="external">
  <img src="http://www.qkeer.com/templets/image/banner468x60.gif" /></a></div>

<div class="art_detail_now">您正在阅读文章:
 <span>符合WEB标准的滚动文字特效的实现方法</span><br />
 ● 关键词:
 <span>
  
<script language="javascript" src="/ad/adnav.js"></script></span><br />
 上一篇:<label id="PrevPage_9IF5J4C4E387110"></label><script language="JavaScript" type="text/javascript" src="http://www.cz268.com.cn/Showpage.asp?Id=9IF5J4C4E387110&Type=NS&PageType=PrevPage"></script><br />
 下一篇:<label id="NextPage_9IF5J4C4E387110"></label><script language="JavaScript" type="text/javascript" src="http://www.cz268.com.cn/Showpage.asp?Id=9IF5J4C4E387110&Type=NS&PageType=NextPage"></script></div>
<div class="art_detail_list">
<span>相关文章</span>

<ul>


<li><a href="/Design/w3c/1623584026185I9KAFFJCCG.html">大型Web2.0站点构建技术初探</a> 2007-10-16</li>

<li><a href="/Design/w3c/142225888I21I6FFC808716.html">网页设计文字大小相关的四种设置方法</a> 2007-10-14</li>

<li><a href="/Design/w3c/142224258035241B9KH76II.html">网页设计并非所有内容都必须要DIV做“容器”</a> 2007-10-14</li>

<li><a href="/Design/w3c/142222952EAH1AAG8J73G9I.html">解决IE7以下版本不支持无A状态伪类的几种方法</a> 2007-10-14</li>

<li><a href="/Design/w3c/14222022KII5I8FFEFGBBEH.html">距离北京2008年奥运会开幕的倒记时特效,简单的演示一下!</a> 2007-10-14</li>

<li><a href="/Design/w3c/42424628G7K05J96984BB.html">自定义网页超链接下划线的CSS代码</a> 2007-10-04</li>
</ul>
</div>
</div>
<div class="r">
<div class="nav">
<div class="nav_title">
<div id="n1">268站长知识库</div>
</div>
<div class="nav_list">
<ul>
  <li><a href="http://www.cz268.com.cn/Design/Pages/">网页</a> </li>
  <li><a href="http://www.cz268.com.cn/Design/Edit/">编程</a> </li>
  <li><a href="http://www.cz268.com.cn/Webbiz/Seo/">优化</a> </li>
  <li><a href="http://www.cz268.com.cn/Webbiz/Pormot/">推广</a> </li>
  <li><a href="http://www.cz268.com.cn/Webbiz/Blog/">博客</a> </li>
  <li><a href="http://www.cz268.com.cn/Design/w3c/">WEB标准</a> </li>
  <li><a href="http://www.cz268.com.cn/Webmaster/RecSite/">酷站</a> </li>
  <li><a href="http://www.cz268.com.cn/Webbiz/Exp/">经验</a> </li>
  <li><a href="http://www.cz268.com.cn/Webbiz/Free/">资源</a> </li>
  <li><a href="http://www.cz268.com.cn/Webmaster/Reading/">必读</a> </li>
  <li><a href="http://www.cz268.com.cn/Server/">服务器</a> </li>
  <li><a href="http://www.cz268.com.cn/cms/">CMS建站</a> </li>
</ul></div>
<div class="nav_title">
<div id="n2">站长网业内相关</div>
</div>
<div class="nav_list">
<ul>
  <li><a href="http://www.cz268.com.cn/article/p1/14.html">业界</a> </li>
  <li><a href="http://www.cz268.com.cn/article/p1/15.html">融资</a> </li>
  <li><a href="http://www.cz268.com.cn/article/p1/16.html">门户</a> </li>
  <li><a href="http://www.cz268.com.cn/article/p1/17.html">搜索</a> </li>
  <li><a href="http://www.cz268.com.cn/article/p1/19.html">商务</a> </li>
  <li><a href="http://www.cz268.com.cn/article/p1/18.html">开发 </a> </li></ul></div>
<div class="nav_title">
<div id="n3">站长网联盟资讯</div>
</div>
<div class="nav_list">
<ul>
  <li><a href="http://www.cz268.com.cn/Union/News/">联盟</a> </li>
  <li><a href="http://www.cz268.com.cn/Union/Intro/">介绍 </a> </li>
  <li><a href="http://www.cz268.com.cn/Union/Comment/">点评</a> </li>
  <li><a href="http://www.cz268.com.cn/Union/Skill/">技巧</a> </li>
  <li><a href="http://www.cz268.com.cn/Union/">联盟杂谈</a> </li></ul></div>
<div class="nav_title">
<div id="n4">站长网常用工具</div></div>
<div class="nav_list">
<ul>
  <li><a href="http://www.cz268.com.cn/Tool/Alexa/">Alexa</a> </li>
  <li><a href="http://www.cz268.com.cn/Tool/IP/">IP</a> </li>
  <li><a href="http://www.cz268.com.cn/Tool/Whois/">WHOIS</a>  </li>
  <li><a href="http://www.cz268.com.cn/Tool/PR/">PR</a> </li>
  <li><a href="http://www.cz268.com.cn/Tool/Meta/">MEAT</a> </li>
  <li><a  href="http://www.cz268.com.cn/Tool/Key/">关键词</a></li></ul></div></div>
<div class="ad_300x250">
<script type="text/javascript"><!--
google_ad_client = "pub-8464933448352541";
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = "300x250_as";
google_ad_type = "image";
//2007-08-10: Http://www.cz268.com.cn
google_ad_channel = "3774858981";
google_color_border = "191919";
google_color_bg = "FFFFFF";
google_color_link = "0066CC";
google_color_text = "000000";
google_color_url = "32527A";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="mba_title">『热门文章』
  <span>268站长网</span></div>


<div class="border mba ">

 <ul>

  <li><a title="64位Web服务器安装配置注意事项" href="/Server/Web/4137C923K9KAH60B5CIK6.html" rel="external">64位Web服务器安装配置注意事项..</a></li>
  <li><a title="徐静蕾:站长们,大家懂炒作吗?" href="/News/IT/192134JB90KE4B655BH2AJ0.html" rel="external">徐静蕾:站长们,大家懂炒作吗?..</a></li>
  <li><a title="申请Google Adsense赚钱准则" href="/Union/Skill/9164326D9ECBA8J5BI0D99.html" rel="external">申请Google Adsense赚钱准则..</a></li>
  <li><a title="博客的营销 想说爱你不容易" href="/Webbiz/Blog/412787AJ1IA91239A1F8D.html" rel="external">博客的营销 想说爱你不容易..</a></li>
  <li><a title="符合XHTML标准DIV+CSS布局的网站对SEO的影响 " href="/Webbiz/Exp/18299H53K4407DDK1K6JA.html" rel="external">符合XHTML标准DIV+CSS布局的网站对SE..</a></li>
  <li><a title="我们怎样写软文诱骗点击量的上升!" href="/Webbiz/Pormot/31429J1AC36GA779F380KF.html" rel="external">我们怎样写软文诱骗点击量的上升!..</a></li>
  <li><a title="注意:新网互联的域名,你只有使用权! " href="/News/IT/3101584H84FGI21K0F4HI2.html" rel="external">注意:新网互联的域名,你只有使用权..</a></li>
  <li><a title="国内备案难,转移国外空间的基本常识" href="/News/IT/27151C4C6HF6G1540EE67E.html" rel="external">国内备案难,转移国外空间的基本常识..</a></li>
  <li><a title="打造地方门户站点全功略 超级SEO优化给你全面分析" href="/Webbiz/Seo/7335242704F1BI101D8FI.html" rel="external">打造地方门户站点全功略 超级SEO优化..</a></li>
  <li><a title="经典话题十问十答 助你提高网上的成交率" href="/Webmaster/Reading/232917D5H6JID4CH06IG6.html" rel="external">经典话题十问十答 助你提高网上的成交..</a></li>
 </ul>
</div>


<div class="ad_125x125">
<script type="text/javascript"><!--
google_ad_client = "pub-8464933448352541";
google_ad_width = 120;
google_ad_height = 60;
google_ad_format = "120x60_as_rimg";
google_cpa_choice = "CAEQxIjL9gEaCJHH53FOqPVZKITT6n4";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
 
<script type="text/javascript"><!--
google_ad_client = "pub-8464933448352541";
google_ad_width = 120;
google_ad_height = 60;
google_ad_format = "120x60_as_rimg";
google_cpa_choice = "CAEQy6OdzgEaCC8eN93A557iKLHM93M";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
 </div>
<div class="border sideart">
<div class="border_title sideart_title">『<a
href="http://www.cz268.com.cn/cms/">草根站长CMS学堂</a>』268站长网</div>

<div class="sideart_content">

 <ul>

  <li><a title="让风讯显示所有系统字体的代码" href="/cms/foosun/13225022H3IGA159AD9B2KK.html" rel="external">让风讯显示所有系统字体的代码..</a></li>
  <li><a title="为风讯推荐新闻和热点新闻添加标识性文字或图片" href="/cms/foosun/132248778HC517G03K5I4BC.html" rel="external"><font color="#CC0000">为风讯推荐新闻和热点新闻添加标识性文字或</font>..</a></li>
  <li><a title="图片、数字可选择自动显示列表顺序1,2,3的功能" href="/cms/foosun/132244870DIA50I5JA5I304.html" rel="external">图片、数字可选择自动显示列表顺序1,2,3的功..</a></li>
  <li><a title="Foosun 4.0实现网易clickeye功能" href="/cms/foosun/13224377846G00GHAHKFDA6.html" rel="external">Foosun 4.0实现网易clickeye功能..</a></li>
  <li><a title="风讯sp2发布特推出论坛工具" href="/cms/foosun/13224299B01I2DC9CIK4AE6.html" rel="external">风讯sp2发布特推出论坛工具..</a></li>
  <li><a title="风讯FS4.0增加图片防盗链功能" href="/cms/foosun/1322413718G1DAA95JG2JI4.html" rel="external"><font color="#CC0000">风讯FS4.0增加图片防盗链功能</font>..</a></li>
  <li><a title="风讯DIV+CSS做两列新闻列表分栏的方法" href="/cms/foosun/13224036HKICIB1BE9K64G5.html" rel="external">风讯DIV+CSS做两列新闻列表分栏的方法..</a></li>
  <li><a title="提供风讯4.0系统会员日志模板6套" href="/cms/foosun/13223694732D9E863FH8C82.html" rel="external">提供风讯4.0系统会员日志模板6套..</a></li>
  <li><a title="风讯画中画实现调用google广告的方法" href="/cms/foosun/132234842AJAI5GD75C140K.html" rel="external">风讯画中画实现调用google广告的方法..</a></li>
  <li><a title="为会员系统增加“你有新短消息,请注意查收”语音提示功能" href="/cms/foosun/132233141FHK3C9HA1GC34K.html" rel="external">为会员系统增加“你有新短消息,请注意查收..</a></li>
 </ul>
</div>

  </div></div>
<DIV class="border links"><SPAN>友情链接</SPAN>
<DIV class="border_content links_content"> <table width="100%" border="0" cellspacing="1" cellpadding="3">
 <tr>
   <td width="10%" align="center" valign="meddle"><a href="http://www.qkeer.com"  target="_blank">Q客网</a></td>
  <td width="10%" align="center" valign="meddle"><a href="http://www.ip180.com"  target="_blank">IP180常用查询</a></td>
  <td width="10%" align="center" valign="meddle"><a href="http://www.jc286.com"  target="_blank">jc286教程网</a></td>
  <td width="10%" align="center" valign="meddle"><a href="http://www.21seo.cn"  target="_blank">SEO优化部落</a></td>
  <td width="10%" align="center" valign="meddle"><a href="http://www.51w3c.com"  target="_blank">网页标准协会</a></td>
  <td width="10%" align="center" valign="meddle"><a href="http://www.cz268.com.cn"  target="_blank">268站长网</a></td>

 </tr>
</table></DIV>
</DIV>
<div class="footer"><a href="http://www.cz268.com.cn/">268站长网首页</a> | <a href="http://www.cz268.com.cn/Webbiz">网站运作</a> | <a href="http://www.cz268.com.cn/News">业界新闻 </a>  | <a href="http://www.cz268.com.cn/Union">联盟资讯 </a>  | <a href="http://www.cz268.com.cn/Design">站长学院 </a> | <a href="http://www.cz268.com.cn/Webmaster">站长在线</a> | <a href="http://www.cz268.com.cn/tool">站长工具</a> | <a href="http://www.cz268.com.cn/cms">CMS专区</a> | <a href="http://www.cz268.com.cn/Server">服务器区</a>| <a href="http://www.cz268.com.cn/sitemap">网站地图</a><br />
<a
href="http://www.cz268.com.cn/">www.cz268.com.cn</a> © 2006-2008 版权所有 268站长网  <img
id="copyright" src="/templets/files/ico_bg.gif" /><a href="http://www.miibeian.gov.cn/"
rel="external">京ICP备案中</a> Powered by QQ469502097
<script src='http://s116.cnzz.com/stat.php?id=470833&web_id=470833' language='JavaScript' charset='gb2312'></script><br />本站信息来自互联网_可供参考不能作为真实依据,另本站如有转载或引用文章涉及版权问题_请速与我们联系</div>
<noscript><iframe src="*.html"></iframe></noscript>  
</body></html>