Javascrip 滚动新闻效果代码实例(相对定位与iframe二种方式)

发布时间:2020-05-13编辑:脚本学堂
本篇文章介绍了,用Javascript实现滚动新闻效果的例子,包括相对定位版不间断滚动与iframe版不间断滚动两种方式,有需要的朋友,可以参考下。

1、相对定位版不间断滚动
 

复制代码 代码示例:
<div style="width:200px;height:150px;overflow:hidden">
<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.jb200.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,
 

复制代码 代码示例:
<table width="324" height="242" border="0" cellpadding="0" cellspacing="0">
  <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 scrollalinuxjishu/9952.html target=_blank class=infotextkey>mount=1 scrolldelay=60 >")
}
}
function marquee2()
{
if (version == "e4")
{
document.write("</marquee>")
}
}
//-->
</script>
<script language=JavaScript>marquee1();</script>
新闻内容<br>
新闻内容<br>
新闻内容<br>
<br>
</td>
</tr>
</table>