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

<!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>
时间： 2024-11-06 19:24:41

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

jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

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

velocity.js实现页面滚动切换效果

在线演示1 在线演示2 在线演示3 在线演示4 在线演示5 本地下载 原文链接:http://www.gbtags.com/gb/share/5650.htm 页面滚动切换效果 今天介绍一个Javascript的小型的动画插件velocity.js,可以方便高效的开发一个具有多页面滚动切换效果的网站. 浏览器支持 velocity.js支持IE8+.Chrome.Firefox等浏览器,并支持Andriod以及IOS. 我们开发一个工程,里面有一组相关联系的大型页面.不能做到在一张页面中把它们展

让网页文字定时交替出现的Js代码

让LI列表中的文字一行一行交替出现,每一行停留数秒后自动转到下一行显示,使用灵活,JS代码非常精简,推荐学习参考和使用.这里给LI设置line-height属性以便控制内容溢出. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>文本定时切换</TITLE> <style type="text/

网页文字竖排的几种实现方式

古时候的书籍里面文字的书写方式都是从上到下从右向左书写的,我们可不可以在网页上实现这种文字排版效果,虽然现在竖排在网页上用的比较的少,但是我们可以在我们自己的个人网站或者博客介绍页面用竖排来排版,使网页样式看起来更加的丰富和复古! 通过一些尝试我找到了如下3中方式在网页上竖排文字的方法,各有各的缺点和优点,下面我们就来看看具体的方法和实现效果吧! 方式1.css属性float实现文字竖排# 实现原理:把一短话的每一句放在一个div中,设置div的宽度和要显示的字体的大小一样(div的高度=字数×

JQuery实现广告效果（滚动切换）

JQuery实现广告效果(滚动切换) Html+css 效果如上图 代码: Java代码   <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-2.1.4.min.js"></script> <

分享一款页面视差滚动切换jquery.localscroll插件

今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="pageWidth" id="box_root"> <!-- 头部导航开始 --> <div id="nav&qu

如何复制防复制的网页文字？

如何复制防复制的网页文字? 2011-04-24 10:25:10|  分类: 电脑知识|举报|字号 订阅 1,网页中嵌入了javascript语言,通过编程手段屏蔽了复制.  只要点击IE的“工具”→“Internet选项”菜单,进入“安全”标签页,选择“自定义级别”,将所有脚本全部禁用,然后按F5键刷新网页,这时你就会发现那些无法选取的文字可以选取了  在采集到了自己需要的内容后,一定要给脚本“解禁”,否则会影响到我们浏览网页.  2,有些网站为了防止别人使用他的内容把它禁掉了,除了上述同志

优雅设置网页文字字体[原创]

微软XP在国内实在是在“深入人心”,虽然微软已经宣布XP“死期”已到,但国内还是大是大把XP用户,这个从IE6在国内占有率为22.2%可以看到. 详细查看:https://www.modern.ie/en-us/ie6countdown#list XP已经为大家服务10多年了,TA已经很老了,微软也宣布停止支持XP了,这本是件好事,但国内各种厂随后宣布继续为XP用户“保架护航”提供支持,这不能不说是个好事,但对于天天与IE6兼容性打交道的WEB前端们来讲,还真不是件好事! 这导致国内大多中文网站

基于html5可拖拽图片循环滚动切换

分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="site-wrapper"> <section id="section-header" data-coloroverlap="dark"></section> <section id="second-phase&qu