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

[ 来源： | 阅读：次 | 更新日期:2007-9-3 17:27:51 | 评论 0 条 | 我要投稿 ]

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

字串6

第一种方法：用javascript模拟marquee的做法。 字串8

<!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">  </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 全部选择提示：你可先修改部分代码，再按运行] 月落

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

字串6

<html> <head> <title> 网页文本SCROLL//webjx.com </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>

字串9

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

字串6

第三种是最精简的，代码非常少。

字串5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 网页文本定时变动的特效代码 </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.webjx.com">网页教学网webjx.com11111</a></li> <li><a href="http:/www.webjx.com">网页教学网webjx.com00000</a></li> <li><a href="http:/www.webjx.com">网页教学网webjx.com22222</a></li> <li><a href="http:/www.webjx.com">网页教学网webjx.com33333</a></li> <li><a href="http:/www.webjx.com">网页教学网webjx.com44444</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.yueluo.net

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 字串7

Tags：网页特效,文本文字特效

责任编辑：

上一篇：Asp.Net中对Cookie的基本操作下一篇：相对路径(Relative Path)和绝对路径(Absolute Path)

您的评论

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为

您的位置:首页>>图形设计>>HTML教程>>阅读资讯：关于符合WEB标准的滚动文字特效的实现方法

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

Tags：网页特效,文本文字特效

您的评论

精彩推荐

赞助商

最新资讯

热点资讯