关于符合WEB标准的滚动文字特效的实现方法
由于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>热点新闻pc51.net</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> </body> |
第二种方法:这个更强,能自动根据内容自动进行左右滚动,解决了宽度太小造成的截取问题。
<html> <head> <title> 网页文本SCROLL//pc51.net </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){ function hs(o,d,c,p){ <body> |
第三种是最精简的,代码非常少。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <BODY> |
文章评论
共有 0 位网友发表了评论 此处只显示部分留言 点击查看完整评论页面