首页
关于我们
网站建设
经典案例
网络推广
技术中心
建站指导
联系我们
网站套餐 Package
最新推荐 Recommended  
  您现在的位置: 天诚世纪 >> 技术中心 >> 网页设计 >> WEB标准 >> 正文
滚动文字特效实现方法===符合WEB标准
作者:天诚世纪 更新时间:2009-11-26 11:04:54 来源:天诚世纪
    

       采用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://www.tc-21.com target=_blank>用“梦幻密保”快速取回帐号密码</a>";
marqueeContent[1]="<a href=http://www.tc-21.com target=_blank>网易将军令官方网站</a>";
marqueeContent[2]="<a href=http://www.tc-21.com target=_blank>最新壁纸下载</a>";
marqueeContent[3]="<a href=http://www.tc-21.com 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="http://www.tc-21.com" >2</a>
<a href="http://www.tc-21.com">3</a>
 <a href="http://www.tc-21.com" 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> pqshow_com

<div class="ad_613x60"><a href="http://www.tc-21.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> pqshow

<ul>
<li><a href="http://www.tc-21.com">大型Web2.0站点构建技术初探</a> 2007-10-16</li> 中国站长.站

<li><a href="http://www.tc-21.com">网页设计文字大小相关的四种设置方法</a> 2007-10-14</li> 中国.站长站

<li><a href="http://www.tc-21.com">网页设计并非所有内容都必须要DIV做“容器”</a> 2007-10-14</li> pqshow.com

<li><a href="http://www.tc-21.com">解决IE7以下版本不支持无A状态伪类的几种方法</a> 2007-10-14</li> 中国站长.站

<li><a href="http://www.tc-21.com">距离北京2008年奥运会开幕的倒记时特效,简单的演示一下!</a> 2007-10-14</li>

<li><a href="http://www.tc-21.com">自定义网页超链接下划线的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.tc-21.com">网页</a> </li>
  <li><a href="http://www.tc-21.com">编程</a> </li>
  <li><a href="http://www.tc-21.com">优化</a> </li>
  <li><a href="http://www.tc-21.com">推广</a> </li>
  <li><a href="http://www.tc-21.com">博客</a> </li> 
  <li><a href="http://www.tc-21.com">WEB标准</a> </li>
  <li><a href="http://www.tc-21.com">酷站</a> </li>
  <li><a href="http://www.tc-21.com">经验</a> </li>
  <li><a href="http://www.tc-21.com">资源</a> </li>
  <li><a href="http://www.tc-21.com">必读</a> </li>
  <li><a href="http://www.tc-21.com">服务器</a> </li>
  <li><a href="http://www.tc-21.com">CMS建站</a> </li>
</ul></div>
<div class="nav_title">
<div id="n2">站长网业内相关</div>
</div>
<div class="nav_list">
<ul>
  <li><a href="http://www.tc-21.com">业界</a> </li> pqshow^com
  <li><a href="http://www.tc-21.com">融资</a> </li>
  <li><a href="http://www.tc-21.com">门户</a> </li>
  <li><a href="http://www.tc-21.com">搜索</a> </li>
  <li><a href="http://www.tc-21.com">商务</a> </li>
  <li><a href="http://www.tc-21.com">开发 </a> </li></ul></div>
<div class="nav_title">
<div id="n3">站长网联盟资讯</div>
</div>
<div class="nav_list">
<ul>
  <li><a href="http://www.tc-21.com">联盟</a> </li>
  <li><a href="http://www.tc-21.com">介绍 </a> </li>
  <li><a href="http://www.tc-21.com">点评</a> </li> Www^pqshow^com
  <li><a href="http://www.tc-21.com">技巧</a> </li>
  <li><a href="http://www.tc-21.com">联盟杂谈</a> </li></ul></div>
<div class="nav_title">
<div id="n4">站长网常用工具</div></div>
<div class="nav_list">
<ul>
  <li><a href="http://www.tc-21.com">Alexa</a> </li>
  <li><a href="http://www.tc-21.com">IP</a> </li>
  <li><a href="http://www.tc-21.com">WHOIS</a>  </li>
  <li><a href="http://www.tc-21.com">PR</a> </li>
  <li><a href="http://www.tc-21.com">MEAT</a> </li>
  <li><a  href="http://www.tc-21.com">关键词</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> Www.pqshow.com

<div class="mba_title">『热门文章』
  <span>天诚世纪</span></div> 中.国.站长站


<div class="border mba ">

 <ul> Www.pqshow.com

  <li><a title="64位Web服务器安装配置注意事项" href="http://www.tc-21.com" rel="external">64位Web服务器安装配置注意事项..</a></li>
  <li><a title="徐静蕾:站长们,大家懂炒作吗?" href="http://www.tc-21.com" rel="external">徐静蕾:站长们,大家懂炒作吗?..</a></li>
  <li><a title="申请Google Adsense赚钱准则" href="http://www.tc-21.com" rel="external">申请Google Adsense赚钱准则..</a></li>
  <li><a title="博客的营销 想说爱你不容易" href="http://www.tc-21.com" rel="external">博客的营销 想说爱你不容易..</a></li>
  <li><a title="符合XHTML标准DIV+CSS布局的网站对SEO的影响 " href="http://www.tc-21.com" rel="external">符合XHTML标准DIV+CSS布局的网站对SE..</a></li> Www.pqshow.com
  <li><a title="我们怎样写软文诱骗点击量的上升!" href="http://www.tc-21.com" rel="external">我们怎样写软文诱骗点击量的上升!..</a></li>
  <li><a title="注意:新网互联的域名,你只有使用权! " href="http://www.tc-21.com" rel="external">注意:新网互联的域名,你只有使用权..</a></li>
  <li><a title="国内备案难,转移国外空间的基本常识" href="http://www.tc-21.com" rel="external">国内备案难,转移国外空间的基本常识..</a></li>
  <li><a title="打造地方门户站点全功略 超级SEO优化给你全面分析" href="http://www.tc-21.com" rel="external">打造地方门户站点全功略 超级SEO优化..</a></li>
  <li><a title="经典话题十问十答 助你提高网上的成交率" href="http://www.tc-21.com" 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>』天诚世纪</div>

<div class="sideart_content">

 <ul> 中.国.站.长.站

  <li><a title="让风讯显示所有系统字体的代码" href="http://www.tc-21.com" rel="external">让风讯显示所有系统字体的代码..</a></li>
  <li><a title="为风讯推荐新闻和热点新闻添加标识性文字或图片" href="http://www.tc-21.com" rel="external"><font color="#CC0000">为风讯推荐新闻和热点新闻添加标识性文字或</font>..</a></li>
  <li><a title="图片、数字可选择自动显示列表顺序1,2,3的功能" href="http://www.tc-21.com" rel="external">图片、数字可选择自动显示列表顺序1,2,3的功..</a></li>
  <li><a title="Foosun 4.0实现网易clickeye功能" href="http://www.tc-21.com" rel="external">Foosun 4.0实现网易clickeye功能..</a></li>
  <li><a title="风讯sp2发布特推出论坛工具" href="http://www.tc-21.com" rel="external">风讯sp2发布特推出论坛工具..</a></li> 
  <li><a title="风讯FS4.0增加图片防盗链功能" href="http://www.tc-21.com" rel="external"><font color="#CC0000">风讯FS4.0增加图片防盗链功能</font>..</a></li>
  <li><a title="风讯DIV+CSS做两列新闻列表分栏的方法" href="http://www.tc-21.com" rel="external">风讯DIV+CSS做两列新闻列表分栏的方法..</a></li>
  <li><a title="提供风讯4.0系统会员日志模板6套" href="http://www.tc-21.com" rel="external">提供风讯4.0系统会员日志模板6套..</a></li>
  <li><a title="风讯画中画实现调用google广告的方法" href="http://www.tc-21.com" rel="external">风讯画中画实现调用google广告的方法..</a></li>
  <li><a title="为会员系统增加“你有新短消息,请注意查收”语音提示功能" href="http://www.tc-21.com" 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.tc-21.com"  target="_blank">Q客网</a></td>
  <td width="10%" align="center" valign="meddle"><a href="http://www.tc-21.com"  target="_blank">IP180常用查询</a></td>
  <td width="10%" align="center" valign="meddle"><a href="http://www.tc-21.com"  target="_blank">jc286教程网</a></td>
  <td width="10%" align="center" valign="meddle"><a href="http://www.tc-21.com"  target="_blank">SEO优化部落</a></td> Www^pqshow^com
  <td width="10%" align="center" valign="meddle"><a href="http://www.tc-21.com"  target="_blank">网页标准协会</a></td>
  <td width="10%" align="center" valign="meddle"><a href="http://www.tc-21.com"  target="_blank">天诚世纪</a></td> </tr>
</table></DIV>
</DIV>
<div class="footer"><a href="http://www.tc-21.com">天诚世纪</a> | <a href="http://www.tc-21.com">网站运作</a> | <a href="http://www.tc-21.com">业界新闻 </a>  | <a href="http://www.cz268.com.cn/Union">联盟资讯 </a>  | <a href="http://www.tc-21.com">站长学院 </a> | <a href="http://www.tc-21.com">站长在线</a> | <a href="http://www.tc-21.com">站长工具</a> | <a href="http://www.tc-21.com">CMS专区</a> | <a href="http://www.tc-21.com">服务器区</a>| <a href="http://www.tc-21.com">网站地图</a><br />
<a
href="http://www.tc-21.com/">http://www.tc-21.com</a> © 2006-2008 版权所有 天诚世纪  <img Www@pqshow@com
id="copyright" src="/templets/files/ico_bg.gif" /><a href="http://www.miibeian.gov.cn/"
rel="external">鄂ICP备07009858号</a> Powered by QQ448163207
<script src='http://s95.cnzz.com/stat.php?id=513575&web_id=513575&show=pic' language='JavaScript' charset='gb2312'></script><br />本站信息来自互联网_可供参考不能作为真实依据,另本站如有转载或引用文章涉及版权问题_请速与我们联系</div>
<noscript><iframe src="*.html"></iframe></noscript>  
</body></html>

本文链接:http://www.tc-21.com/ITCenter/200911/20091126110454.html

  • 上一篇文章:
  • 下一篇文章:
  •   更多关于WEB标准的新闻
      相关文章
    DIV与TABLE的区别
    浏览器不能正常解析CSS代码的解决
    HTML与javascript中常用编码浅析
    用CSS3 实现未来的Web
    DIV+CSS网页布局及网站设计常犯错误
    HTML5与HTML4的区别
    CSS布局实例:上中下三行 中间自适应
    CSS常用技巧介绍