多行文字同时向上滚动特效

2016-09-14 网页编程网 网页编程网

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
</div>
</div>
</div>
</div>
</body>
</html>

阅读原文

阅读 4034

123 显示电脑版