Javascrip 滚动新闻效果代码实例(相对定位与iframe二种方式)
1、相对定位版不间断滚动
<table cellspacing=0 cellpadding=5 bgcolor=#ffffff
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>
sasasasasasas<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>
//重复一次新闻内容
//www.jiaochengji.com
document.write(news.tBodies[0].innerHTML)
</script>
</table>
</div>
<script language=javascript>
//实现不间断滚动
function newsScroll()
{
news.style.pixelTop=(news.style.pixelTop-1)%(news.clientHeight/2);
if(news.style.pixelTop%150)
timer1=setTimeout('newsScroll()',10) //更改第二个参数可以改变速度，值越小，速度越快。
else
timer1=setTimeout('newsScroll()',3000) //更改第二个参数可以改变时间间隔。
}
newsScroll();
</script>
<!-- end --->
2、iframe版不间断滚动：
例1，
<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>");
//实现不间断滚动
function frameScroll()
{
newsFrame.scrollTo(0,(newsFrame.document.body.scrollTop+1)%(newsFrame.news.clientHeight/2));
if(newsFrame.document.body.scrollTop%150)
setTimeout('frameScroll()',10) //更改第二个参数可以改变速度，值越小，速度越快。
else
setTimeout('frameScroll()',3000) //更改第二个参数可以改变时间间隔。
}
frameScroll();
</script>
<!-- end --->
例2，
<tr>
<td width="324" height="242" align="center">
<p>
<script language=JavaScript>
<!--//
var version = "other"
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version = "n3";
else if (browserName == "Netscape" && browserVer < 3) version = "n2";
else if (browserName == "Microsoft Internet Explorer" && browserVer >= 4) version = "e4";
else if (browserName == "Microsoft Internet Explorer" && browserVer < 4) version = "e3";
function marquee1()
{
if (version == "e4")
{
document.write("<marquee behavior=scroll direction=up width=324 height=242 scrollamount=1 scrolldelay=60 >")
}
}
function marquee2()
{
if (version == "e4")
{
document.write("</marquee>")
}
}
//-->
</script>
<script language=JavaScript>marquee1();</script>
新闻内容<br>
新闻内容<br>
新闻内容<br>
<br>
</td>
</tr>
</table>
您可能感兴趣的文章：
Javascrip 滚动新闻效果代码实例(相对定位与iframe二种方式)
JavaScript制作滚动字幕
jQuery新闻滚动插件 jquery.roller.js
js判断当前页面是否被iframe引用的方法
jquery滚动条插件
利用div+jquery自定义滚动条样式的2种方法
iframe局部刷新的二种实现方法
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
网页超级链接