首页 > 代码库 > 多行文本滚动切换的网页文字特效

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

2024-07-27 20:08:18   213人阅读

<!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 tagobj.mr=mr; //marquee rowsobj.mw=mw; //marquee widthobj.mh=mh; //marquee heightobj.ms=ms; //marquee speedobj.pause=pause; //pause timeobj.pt=0; //pre topobj.st=0; //stop timeobj.dr=dr; //directionwith(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 topobj.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"><aclass="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"><!--var is_support_flash = yfla.is_support(7);if(is_support_flash){var top_search_mod = document.getElementById("top_search");top_search_mod.className = "mod flash";top_search_mod.getElementsByTagName("h2")[0].innerHTML = " ";document.getElementById("top_search_txt_cont").style.display = "none";document.getElementById("top_search_flash_cont").style.display = "";document.getElementById("top_search_lnks_cont").style.display = "";}//--></script></div></div></div></div></body></html>

 

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


联系
我们