实现不间断向上滚动文字的特效
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="marquees">
<!-- 这些是字幕的内容,你可以任意定义 -->
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="center" class="FEA203br">赶紧干你的活去否则!嘿嘿,不给你发钱</td>
</tr>
<tr>
<td align="center" class="FEA203br">#</td>
</tr>
<tr>
<td align="center" class="FEA203br">#</td>
</tr>
</table>
<!-- 字幕内容结束 -->
</div>
<!-- 以下是javascript代码 -->
<script language="javascript">
<!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",20);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>
</BODY>
</HTML>
以下是分屏显示滚动效果:<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="marquees">
<!-- 这些是字幕的内容,你可以任意定义 -->
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="center" class="FEA203br">赶紧干你的活去否则!嘿嘿,不给你发钱</td>
</tr>
<tr>
<td align="center" class="FEA203br">#</td>
</tr>
<tr>
<td align="center" class="FEA203br">#</td>
</tr>
</table>
<!-- 字幕内容结束 -->
</div>
<!-- 以下是javascript代码 -->
<script language="javascript">
<!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",20);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:800px;height:60px;} <!--这里修改Div高度 -->
#infozone div{height:60px;line-height:20px;white-space:nowrap;overflow:hidden;} <!--这里修改Div高度 -->
</style>
<div id="infozone">
<div>第1行:赶紧干你的活去否则!嘿嘿,不给你发钱<br>第2行:路边野花不要采<br>第3行:海的女儿</div>
<div>第4行:赶紧干你的活去否则!嘿嘿,不给你发钱<br>第5行:路边野花不要采<br>第6行:海的女儿</div>
<div>第7行:赶紧干你的活去否则!嘿嘿,不给你发钱<br>第8行:路边野花不要采<br>第9行:海的女儿</div>
</div>
<script type="text/javascript">
var o=document.getElementById('infozone');
mr=window.setInterval(function(){scrollup(o,60,0);},4000); //4000代表间隔多长时间,包括滚动的时间。60代表滚动的高度。
infozone.onmouseover=function() {clearInterval(mr)}
infozone.onmouseout=function() {mr=setInterval(function(){scrollup(o,60,0);},4000)} //同上
function scrollup(o,d,c){
if(d<=c){
var t=o.firstChild.cloneNode(true);
o.removeChild(o.firstChild);
o.appendChild(t);
t.style.marginTop=o.firstChild.style.marginTop='0px';
}
else{
var s=3,c=c+s,l=(c>=d?c-d:0);
o.firstChild.style.marginTop=-c+l+'px';
window.setTimeout(function(){scrollup(o,d,c-l)},100);
}
}
</script>
</BODY>
</HTML>
特效来自:http://www.wenzhou.gov.cn/gb/wz/index.html<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:800px;height:60px;} <!--这里修改Div高度 -->
#infozone div{height:60px;line-height:20px;white-space:nowrap;overflow:hidden;} <!--这里修改Div高度 -->
</style>
<div id="infozone">
<div>第1行:赶紧干你的活去否则!嘿嘿,不给你发钱<br>第2行:路边野花不要采<br>第3行:海的女儿</div>
<div>第4行:赶紧干你的活去否则!嘿嘿,不给你发钱<br>第5行:路边野花不要采<br>第6行:海的女儿</div>
<div>第7行:赶紧干你的活去否则!嘿嘿,不给你发钱<br>第8行:路边野花不要采<br>第9行:海的女儿</div>
</div>
<script type="text/javascript">
var o=document.getElementById('infozone');
mr=window.setInterval(function(){scrollup(o,60,0);},4000); //4000代表间隔多长时间,包括滚动的时间。60代表滚动的高度。
infozone.onmouseover=function() {clearInterval(mr)}
infozone.onmouseout=function() {mr=setInterval(function(){scrollup(o,60,0);},4000)} //同上
function scrollup(o,d,c){
if(d<=c){
var t=o.firstChild.cloneNode(true);
o.removeChild(o.firstChild);
o.appendChild(t);
t.style.marginTop=o.firstChild.style.marginTop='0px';
}
else{
var s=3,c=c+s,l=(c>=d?c-d:0);
o.firstChild.style.marginTop=-c+l+'px';
window.setTimeout(function(){scrollup(o,d,c-l)},100);
}
}
</script>
</BODY>
</HTML>
<HTML><HEAD><TITLE>文字滚动效果</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(/images_sy/index_bg.jpg);
}
body,td,th {
font-size: 12px;
color: #363636;
font-family: Arial, Helvetica, sans-serif;
}
-->
</STYLE>
<LINK href="/css/style_sy.css" type=text/css rel=stylesheet>
<STYLE type=text/css>
<!--
.style1 {font-size: 12px; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif;}
.style2 {font-weight: bold; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif;}
.trans {filter:revealTrans(Transition=12,Duration=1)}
#key{color:#aaa}
.blue {}
.blue {font-size: 12px;color: #006699;}
a.blue:link {font-size: 12px; COLOR:#006699; TEXT-DECORATION: none}
a.blue:visited {font-size: 12px; COLOR: #006699; TEXT-DECORATION: none}
a.blue:hover {font-size: 12px;COLOR: #006699; TEXT-DECORATION: underline}
.titlezcjd {font-size: 12px;font-weight: bold;color: #346CC1;}
A.titlezcjd:link {font-size: 12px;font-weight: bold;color: #346CC1;}
A.titlezcjd:visited {font-size: 12px;font-weight: bold;color: #346CC1;}
A.titlezcjd:hover {font-size: 12px;font-weight: bold;color: #346CC1;}
-->
</STYLE>
<META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
<BODY>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
<tr>
<td>
<script language="JavaScript">
var IDX= -1;
Text = new Array(
"·<a href='http://news.66wz.com/system/2006/11/09/100210333.shtml' class='title1' target=_blank>2007年大学考试</a> ·<a href='http://www.gov.cn/fwxx/gwz2007/index.htm' class='title1' target=_blank>2007年中直机关公务员招录</a> ·<a href='http://www.xinhuanet.com/politics/16jlzqh/' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> "
,"·<a href='http://www.gov.cn/ztzl/jqtdtk/index.htm' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> ·<a href='http://politics.people.com.cn/GB/8198/68298/68550/index.html' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> ·<a href='http://news.66wz.com/system/2006/08/24/100172442.shtml' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> "
,"·<a href='http://www.gov.cn/ztzl/yfxz/' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> ·<a href='http://www.zhejiang.gov.cn/gb/zjnew/node3/node22/node170/node685/index.html' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> ·<a href='http://www.zhejiang.gov.cn/gb/node2/node50/node52/node69/node480/node4221/index.html' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> ")
function playAd()
{
if (IDX==Text.length-1)
{
IDX=0;
}
else
{
IDX++;
}
var prefix = "";
divText.filters[0].apply();
divText.innerHTML = prefix + Text[IDX];
divText.filters[0].play();
to = setTimeout("playAd()",5000);
}
</script></td>
</tr>
<tr>
<td><img src="/images_sy/line4.jpg" width="100%" height="5"></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="15%"><div align="right"><img src="/images_sy/a3.gif" width="19" height="15" align="absmiddle"><span class="title6">热点聚焦:</span></div></td>
<td width="75%" height="18" id="divText" class="trans">test</td>
<script>playAd()</script>
<td width="10%" height="18"> >><a href ="http://www.wenzhou.gov.cn/gb/wz/shouye/rdjj/index.html" class="text2">更多</a></td>
</tr>
</table>
</body>
</html>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(/images_sy/index_bg.jpg);
}
body,td,th {
font-size: 12px;
color: #363636;
font-family: Arial, Helvetica, sans-serif;
}
-->
</STYLE>
<LINK href="/css/style_sy.css" type=text/css rel=stylesheet>
<STYLE type=text/css>
<!--
.style1 {font-size: 12px; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif;}
.style2 {font-weight: bold; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif;}
.trans {filter:revealTrans(Transition=12,Duration=1)}
#key{color:#aaa}
.blue {}
.blue {font-size: 12px;color: #006699;}
a.blue:link {font-size: 12px; COLOR:#006699; TEXT-DECORATION: none}
a.blue:visited {font-size: 12px; COLOR: #006699; TEXT-DECORATION: none}
a.blue:hover {font-size: 12px;COLOR: #006699; TEXT-DECORATION: underline}
.titlezcjd {font-size: 12px;font-weight: bold;color: #346CC1;}
A.titlezcjd:link {font-size: 12px;font-weight: bold;color: #346CC1;}
A.titlezcjd:visited {font-size: 12px;font-weight: bold;color: #346CC1;}
A.titlezcjd:hover {font-size: 12px;font-weight: bold;color: #346CC1;}
-->
</STYLE>
<META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
<BODY>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
<tr>
<td>
<script language="JavaScript">
var IDX= -1;
Text = new Array(
"·<a href='http://news.66wz.com/system/2006/11/09/100210333.shtml' class='title1' target=_blank>2007年大学考试</a> ·<a href='http://www.gov.cn/fwxx/gwz2007/index.htm' class='title1' target=_blank>2007年中直机关公务员招录</a> ·<a href='http://www.xinhuanet.com/politics/16jlzqh/' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> "
,"·<a href='http://www.gov.cn/ztzl/jqtdtk/index.htm' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> ·<a href='http://politics.people.com.cn/GB/8198/68298/68550/index.html' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> ·<a href='http://news.66wz.com/system/2006/08/24/100172442.shtml' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> "
,"·<a href='http://www.gov.cn/ztzl/yfxz/' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> ·<a href='http://www.zhejiang.gov.cn/gb/zjnew/node3/node22/node170/node685/index.html' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> ·<a href='http://www.zhejiang.gov.cn/gb/node2/node50/node52/node69/node480/node4221/index.html' class='title1' target=_blank>赶紧干你的活去否则!嘿嘿</a> ")
function playAd()
{
if (IDX==Text.length-1)
{
IDX=0;
}
else
{
IDX++;
}
var prefix = "";
divText.filters[0].apply();
divText.innerHTML = prefix + Text[IDX];
divText.filters[0].play();
to = setTimeout("playAd()",5000);
}
</script></td>
</tr>
<tr>
<td><img src="/images_sy/line4.jpg" width="100%" height="5"></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="15%"><div align="right"><img src="/images_sy/a3.gif" width="19" height="15" align="absmiddle"><span class="title6">热点聚焦:</span></div></td>
<td width="75%" height="18" id="divText" class="trans">test</td>
<script>playAd()</script>
<td width="10%" height="18"> >><a href ="http://www.wenzhou.gov.cn/gb/wz/shouye/rdjj/index.html" class="text2">更多</a></td>
</tr>
</table>
</body>
</html>