码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2014-10-18 12:25:31      阅读：313      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   color   io   os   ar   java   for   

<!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">
<!--
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>

 

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

标签：style   blog   http   color   io   os   ar   java   for   

原文地址：http://www.cnblogs.com/youtianxia/p/4032743.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！