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

发布时间：2018-08-26 00:34 所属栏目：121 来源：站长网

导读：网页中某块区域多行文本交替切换滚动出现！可以研究下看看有没有其它用途。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta htt

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

<!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>烈火建站资源网(www.veryhuo.com)</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> </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.veryhuo.com" _fcksavedurl="http://www.veryhuo.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> </div> </div> </div> </div> </body> </html>

（编辑：ASP站长网）