多行文本滚动切换的网页文字特效

http://www.gaoqian.com/ 2007-11-01 21:07:41 来源:网页教学网站长整理

网页中某块区域多行文本交替切换滚动出现！可以研究下看看有没有其它用途。

<!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>BODY { FONT: 12px arial,simsun,sans-serif; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center } BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } FORM { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } P { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } OL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } P { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } H2 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } H3 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } H4 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } UL { LIST-STYLE-TYPE: none } H1 { DISPLAY: none } LEGEND { DISPLAY: none } IMG { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } FIELDSET { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } A:link { TEXT-DECORATION: none } A:visited { TEXT-DECORATION: none } A:hover { TEXT-DECORATION: underline } .mod { CLEAR: both; BACKGROUND: #fff; MARGIN-BOTTOM: 0.84em } .mod .bd { PADDING-RIGHT: 1.25em; PADDING-LEFT: 1.25em; PADDING-BOTTOM: 0.84em; PADDING-TOP: 0.84em; ZOOM: 1 } .mod .bd_a { MARGIN-BOTTOM: 0.8em; PADDING-BOTTOM: 0.6em } .mod .bd_a { CLEAR: both; ZOOM: 1 } .mod .bd_b { CLEAR: both; ZOOM: 1 } .sideblock .bd { PADDING-RIGHT: 0.84em; PADDING-LEFT: 0.84em; PADDING-BOTTOM: 0.84em; PADDING-TOP: 0.84em } .mod LI { LINE-HEIGHT: 1.6em } .mod .hd { LINE-HEIGHT: 1.58em; ZOOM: 1; HEIGHT: 1.58em } .mod .hd H2 { DISPLAY: inline; FONT-SIZE: 1em; FLOAT: left; MARGIN-LEFT: 1em; COLOR: #333 } .mod .hd H3 { DISPLAY: inline; FONT-SIZE: 1em; FLOAT: left; MARGIN-LEFT: 1em; COLOR: #333 } .sideblock .hd H2 { MARGIN-LEFT: 0.84em } .sideblock .hd H3 { MARGIN-LEFT: 0.84em } .mod .hd H2 A { MARGIN: 0px 0.25em } .mod .hd EM { FLOAT: right; MARGIN-RIGHT: 1.17em } .sideblock .hd EM { MARGIN-RIGHT: 0.84em } .mod .hd EM LI { PADDING-LEFT: 0.5em; FLOAT: left; MARGIN-LEFT: 0.5em; LIST-STYLE-TYPE: none } .focus { FLOAT: left; LINE-HEIGHT: 2em; MARGIN-RIGHT: 1em; TEXT-ALIGN: center } .mod .hd:unknown { CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "." } .mod .bd:unknown { CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "." } .mod .bd_a:unknown { CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "." } .mod .bd_b:unknown { CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "." } #pa_tabs_a:unknown { CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "." } #pa_tabs_b:unknown { CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "." } #everyday_tip:unknown { CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "." } .split_bd { POSITION: relative; HEIGHT: 15em } .lstlne { LEFT: -0.5em; OVERFLOW: hidden; WIDTH: 10.25em; BOTTOM: 1.2em; BORDER-BOTTOM: #d0d7dd 1px solid; POSITION: absolute; HEIGHT: 1px } #y_products_list { PADDING-TOP: 0.6em } #y_products_list:unknown { CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "." } #ycn_products_list .col .col_bd:unknown { CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "." } #ycn_products_list:unknown { CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "." } #top_groups LI { LIST-STYLE-TYPE: none; HEIGHT: 1.7em } #top_search LI { LIST-STYLE-TYPE: none; HEIGHT: 1.7em } #top_groups LI B { FLOAT: left; MARGIN: 2px 5px 0px 0px; WIDTH: 14px; HEIGHT: 13px } #top_search LI B { FLOAT: left; MARGIN: 2px 5px 0px 0px; WIDTH: 14px; HEIGHT: 13px } .flash .bd { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 18.34em } .flash .flash_buzzlist { LEFT: 0px; POSITION: absolute; TOP: -1.68em } #top_groups .hd { POSITION: relative } #top_search .hd { POSITION: relative } #top_groups .hd EM { DISPLAY: block; LEFT: 104px; WIDTH: 50px; POSITION: absolute; TOP: 0.18em } #top_search .hd EM { DISPLAY: block; LEFT: 104px; WIDTH: 50px; POSITION: absolute; TOP: 0.18em } .bn_rank_pre { FLOAT: left; OVERFLOW: hidden; WIDTH: 23px; LINE-HEIGHT: 20em; HEIGHT: 15px } .bn_rank_nxt { FLOAT: left; OVERFLOW: hidden; WIDTH: 23px; LINE-HEIGHT: 20em; HEIGHT: 15px } .bn_rank_nxt { FLOAT: right } .mod .hd UL.yui-nav { WIDTH: 100%; POSITION: relative } .mod .hd UL.yui-nav LI { FLOAT: left; POSITION: relative } .mod .hd .yui-nav LI.first I { MARGIN-LEFT: -1px; BORDER-LEFT-STYLE: none } .mod .hd .yui-nav LI.last I { FLOAT: right; MARGIN-RIGHT: -2px } .mod .hd .yui-nav LI I { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; Z-INDEX: 5; PADDING-BOTTOM: 0px; MARGIN-RIGHT: -1px; PADDING-TOP: 2px; POSITION: relative } .mod .hd .yui-nav LI I A { PADDING-RIGHT: 1px; MARGIN-TOP: -1px; DISPLAY: block; PADDING-LEFT: 1px; Z-INDEX: 10; MIN-HEIGHT: 12px; PADDING-BOTTOM: 1px; FONT: 100% arial; WIDTH: 99.5%; PADDING-TOP: 1px; HEIGHT: 12px; TEXT-ALIGN: center; outline: none } .mod .hd .yui-nav LI .pipe { DISPLAY: block; RIGHT: -3px; WIDTH: 1px; POSITION: absolute; TOP: 3px; HEIGHT: 1.15em } .mod .hd .yui-nav LI.selected .pipe { VISIBILITY: hidden } .mod .hd .yui-nav LI.selected I { Z-INDEX: 20; PADDING-BOTTOM: 2px; MARGIN: -1px 0px -3px } .mod .hd LI.selected I A { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 20; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; BORDER-RIGHT-WIDTH: 0px } .mod .hd LI.off .pipe { VISIBILITY: hidden } .hd LI.selected .pipe { VISIBILITY: hidden } .hd LI.last .pipe { VISIBILITY: hidden } .hd LI.sparkle .pipe { VISIBILITY: hidden } .bd_b .flowimg IMG { MARGIN-TOP: 0.3em; FLOAT: left; MARGIN-RIGHT: 0.4em } .bd_b .flowimg UL { FLOAT: left } .bd_b .flowimg UL LI { WIDTH: 145px } .aero{ clear:both; margin:2px; padding:1px; border:1px #fff solid; } </STYLE> <script language="javascript"> function marquee(id,mw,mh,mr,ms,pause,dr){ var obj=document.getElementById(id); obj.ss=false; //stop tag obj.mr=mr; //marquee rows obj.mw=mw; //marquee width obj.mh=mh; //marquee height obj.ms=ms; //marquee speed obj.pause=pause; //pause time obj.pt=0; //pre top obj.st=0; //stop time obj.dr=dr; //direction with(obj){ style.width=mw+"px"; style.height=mh+"px"; noWrap=false; //onmouseover=stopm; 停 onmouseout=startm; scrollTop=0+"px"; scrollLeft=0+"px"; } if(obj.mr!=1){ switch(obj.dr){ case("up"): obj.tt=mh*mr; obj.ct=mh; //current top obj.innerHTML+=obj.innerHTML; setInterval(scrollUp,obj.ms); break; default://("left"): obj.tt=mw*mr; obj.ct=mw; obj.innerHTML='<div style="width:'+(obj.tt*2)+'px;"><div style="float:left;">'+obj.innerHTML+'</div><div style="float:right;">'+obj.innerHTML+'</div></div>'; document.write('<style type="text/css">#'+id+' table{width:'+mw*mr+'px;} #'+id+' td{width:'+mw+'px;}</style>'); setInterval(scrollLeft,obj.ms); break; } } function scrollUp(){ if(obj.ss==true) return; obj.ct+=1; if(obj.ct==obj.mh+1){ obj.st+=1; obj.ct-=1; if(obj.st==obj.pause){obj.ct=0; obj.st=0;} }else { obj.pt=(++obj.scrollTop); if(obj.pt==obj.tt){obj.scrollTop=0;} } } function scrollLeft(){ if(obj.ss==true) return; obj.ct+=1; if(obj.ct==obj.mw+1){ obj.st+=1; obj.ct-=1; if(obj.st==obj.pause){obj.ct=0; obj.st=0;} }else { obj.pt=(++obj.scrollLeft); if(obj.pt==obj.tt){obj.scrollLeft=0;} } } function stopm(){obj.ss=true;} function startm(){obj.ss=false;} } function load() { document.getElementById("content").innerHTML="<DIV id=scrollnew style='OVERFLOW: hidden;' class='aero'><table width='130' border='0' cellspacing='0' cellpadding='0'><tr><td width='130'><span style='FONT-SIZE: 12px;color:#369;'>01、测试信息测试信息<br></span><span style='FONT-SIZE: 12px;color:#f00;'>11、测试信息测试信息</span></td></tr></table></div><DIV id=scrollnew1 style='OVERFLOW: hidden;' class='aero'><table width='130' border='0' cellspacing='0' cellpadding='0'><tr><td width='130'><span style='FONT-SIZE: 12px;color:#369;'>02、测试信息测试信息<br></span><span style='FONT-SIZE: 12px;color:#f00;'>12、测试信息测试信息</span></td></tr></table></div><DIV id=scrollnew2 style='OVERFLOW: hidden;' class='aero'><table width='130' border='0' cellspacing='0' cellpadding='0'><tr><td width='130'><span style='FONT-SIZE: 12px;color:#369;'>03、测试信息测试信息<br></span><span style='FONT-SIZE: 12px;color:#f00;'>13、测试信息测试信息</span></td></tr></table></div><DIV id=scrollnew3 style='OVERFLOW: hidden;' class='aero'><table width='130' border='0' cellspacing='0' cellpadding='0'><tr><td width='130'><span style='FONT-SIZE: 12px;color:#369;'>04、测试信息测试信息<br></span><span style='FONT-SIZE: 12px;color:#f00;'>14、测试信息测试信息</span></td></tr></table></div><DIV id=scrollnew4 style='OVERFLOW: hidden;' class='aero'><table width='130' border='0' cellspacing='0' cellpadding='0'><tr><td width='130'><span style='FONT-SIZE: 12px;color:#369;'>05、测试信息测试信息<br></span><span style='FONT-SIZE: 12px;color:#f00;'>15、测试信息测试信息</span></td></tr></table></div><DIV id=scrollnew5 style='OVERFLOW: hidden;' class='aero'><table width='130' border='0' cellspacing='0' cellpadding='0'><tr><td width='130'><span style='FONT-SIZE: 12px;color:#369;'>06、测试信息测试信息<br></span><span style='FONT-SIZE: 12px;color:#f00;'>16、测试信息测试信息</span></td></tr></table></div><DIV id=scrollnew6 style='OVERFLOW: hidden;' class='aero'><table width='130' border='0' cellspacing='0' cellpadding='0'><tr><td width='130'><span style='FONT-SIZE: 12px;color:#369;'>07、测试信息测试信息<br></span><span style='FONT-SIZE: 12px;color:#f00;'>17、测试信息测试信息</span></td></tr></table></div><DIV id=scrollnew7 style='OVERFLOW: hidden;' class='aero'><table width='130' border='0' cellspacing='0' cellpadding='0'><tr><td width='130'><span style='FONT-SIZE: 12px;color:#369;'>08、测试信息测试信息<br></span><span style='FONT-SIZE: 12px;color:#f00;'>18、测试信息测试信息</span></td></tr></table></div><DIV id=scrollnew8 style='OVERFLOW: hidden;' class='aero'><table width='130' border='0' cellspacing='0' cellpadding='0'><tr><td width='130'><span style='FONT-SIZE: 12px;color:#369;'>09、测试信息测试信息<br></span><span style='FONT-SIZE: 12px;color:#f00;'>19、测试信息测试信息</span></td></tr></table></div><DIV id=scrollnew9 style='OVERFLOW: hidden;' class='aero'><table width='130' border='0' cellspacing='0' cellpadding='0'><tr><td width='130'><span style='FONT-SIZE: 12px;color:#369;'>10、测试信息测试信息<br></span><span style='FONT-SIZE: 12px;color:#f00;'>20、测试信息测试信息</span></td></tr></table></div>" marquee("scrollnew",130,15,2,20,100,"up"); marquee("scrollnew1",130,15,2,20,100,"up"); marquee("scrollnew2",130,15,2,20,100,"up"); marquee("scrollnew3",130,15,2,20,100,"up"); marquee("scrollnew4",130,15,2,20,100,"up"); marquee("scrollnew5",130,15,2,20,100,"up"); marquee("scrollnew6",130,15,2,20,100,"up"); marquee("scrollnew7",130,15,2,20,100,"up"); marquee("scrollnew8",130,15,2,20,100,"up"); marquee("scrollnew9",130,15,2,20,100,"up"); } </script> </head> <body onload="load();"> <div style="width:180PX;"> <div class="mod" id="top_search" > <div class="hd"> <h2></h2> <em id="top_search_lnks_cont" style="DISPLAY: none"><a class="bn_rank_pre" href="#" onclick="alert('pro');">pro<</a><a class="bn_rank_nxt" href="http://www.163.com"onclick="alert('next');">next></a></em></div> <div class="bd"> <ul id="top_search_txt_cont"> </ul> <div class="flash_buzzlist" id="top_search_flash_cont" style="DISPLAY: none width : 156, height : 245"> <div style="margin:22px;"id="content"> <div style="margin:60px;padding:10px;top:50px;"></div> <div> <script type="text/javascript">  </script> </div> </div> </div> </div> </body> </html>

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

复制链接发给好友收藏本文关闭此页

上一篇：仿网易的滑动门导航效果代码(DIV+CSS)

下一篇：网站导航文字按特殊的类型进行切换的特效

多行文本滚动切换的网页文字特效

相关文章

阅读排行

专题教程

推荐文章

最新更新