• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
内蒙古峰回路转armyfeng
博客园    首页    新随笔    联系   管理    订阅  订阅

实现不间断向上滚动文字的特效

<!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>
以下是分屏显示滚动效果：
<!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>文字滚动效果</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>&nbsp;&nbsp;·<a href='http://www.gov.cn/fwxx/gwz2007/index.htm' class='title1' target=_blank>2007年中直机关公务员招录</a>&nbsp;&nbsp;·<a href='http://www.xinhuanet.com/politics/16jlzqh/' class='title1' target=_blank>赶紧干你的活去否则！嘿嘿</a>&nbsp;&nbsp;"
,"·<a href='http://www.gov.cn/ztzl/jqtdtk/index.htm' class='title1' target=_blank>赶紧干你的活去否则！嘿嘿</a>&nbsp;&nbsp;·<a href='http://politics.people.com.cn/GB/8198/68298/68550/index.html' class='title1' target=_blank>赶紧干你的活去否则！嘿嘿</a>&nbsp;&nbsp;·<a href='http://news.66wz.com/system/2006/08/24/100172442.shtml' class='title1' target=_blank>赶紧干你的活去否则！嘿嘿</a>&nbsp;&nbsp;"
,"·<a href='http://www.gov.cn/ztzl/yfxz/' class='title1' target=_blank>赶紧干你的活去否则！嘿嘿</a>&nbsp;&nbsp;·<a href='http://www.zhejiang.gov.cn/gb/zjnew/node3/node22/node170/node685/index.html' class='title1' target=_blank>赶紧干你的活去否则！嘿嘿</a>&nbsp;&nbsp;·<a href='http://www.zhejiang.gov.cn/gb/node2/node50/node52/node69/node480/node4221/index.html' class='title1' target=_blank>赶紧干你的活去否则！嘿嘿</a>&nbsp;&nbsp;")
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">&nbsp;>><a href ="http://www.wenzhou.gov.cn/gb/wz/shouye/rdjj/index.html"  class="text2">更多</a></td>
  </tr>
</table>
</body>
</html>
posted @ 2006-11-03 10:43  老冯  阅读(971)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3