不间断文字向上滚动的处理
<!-- 要实现此效果需要 1 个步骤： -->
<!-- 第 1 步： -->
<!-- 把下面的代码加到<BODY></BODY>区域中： -->
<!-- start ------------------------------------------------------------>
相对定位版不间断滚动：<br><br>
<div style="width:200px;height:150px;overflow:hidden">
<table cellspacing=0 cellpadding=5 bgcolor=#F8F8F8 style="position:relative;top:0px;width:200px;table-layout:fixed" id=news>
<tbody>
<tr>
<td valign=top height=150>
<b>新闻一</b><br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
</td>
</tr>
<tr>
<td valign=top height=150>
<b>新闻二</b><br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
</td>
</tr>
<tr>
<td valign=top height=150>
<b>新闻三</b><br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
新闻内容<br>
</td>
</tr>
</tbody>
<script language=javascript>
//重复一次新闻内容
document.write(news.tBodies[0].innerHTML)
</script>
</table>
</div>
<script language=javascript>
//实现不间断滚动
function newsScroll()
{
news.style.pixelTop=(news.style.pixelTop-1)%(news.clientHeight/2);
}
timer1=setInterval('newsScroll()',10) //更改第二个参数可以改变速度，值越小，速度越快。
</script>
<br><br>
<!-- end -------------------------------------------------------------->
<!-- start ------------------------------------------------------------>
iframe版不间断滚动：<br><br>
<iframe name=newsFrame width=200 height=150 frameborder=0 scrolling=no></iframe>
<script language=javascript>
//这里只是为了方便，向iframe中写入内容，实际使用时直接做一页把内容放进去。
var contents=news.outerHTML;
newsFrame.document.writeln("<body style='margin:0px;'>");
newsFrame.document.writeln("<table cellspacing=0 cellpadding=5 bgcolor=#F8F8F8 style='position:relative;top:0px;width:200px;table-layout:fixed' id=news>");
newsFrame.document.writeln(news.tBodies[0].innerHTML);
newsFrame.document.writeln(news.tBodies[0].innerHTML);
newsFrame.document.writeln("</table>");
//实现不间断滚动
var start=0;
function frameScroll()
{
start=(start+1)%(newsFrame.news.clientHeight/2);
newsFrame.scrollTo(0,start);
}
setInterval('frameScroll()',10) //更改第二个参数可以改变速度，值越小，速度越快。
</script>
<!-- end -------------------------------------------------------------->
您当前的位置：
技术文章导航