`

js 文字上下滚动 无间断循环显示

    博客分类：
  • js
公告HTML 
阅读更多

<TABLE WIDTH=230 BORDER=0 CELLPADDING=0 CELLSPACING=0>
 <TR>
  <TD COLSPAN=4>
   <IMG SRC="http://cs.sina.com.cn/minisite/2007gongyi/images/cn_zty_b15_01.jpg" WIDTH=230 HEIGHT=8></TD>
 </TR>
 <TR>
  <TD>
   <IMG SRC="http://cs.sina.com.cn/minisite/2007gongyi/images/cn_zty_b15_02.jpg" WIDTH=14 HEIGHT=152></TD>
  <TD bgcolor="#3BB934" WIDTH=200 HEIGHT=152>

  <div class="RPR-P1">
   <!-- P1-R2 begin -->
            <!-- 奥运博客圈 begin -->
<div class="RPR-P1-R2">

     <!-- 滚动文字 begin -->
     <div id="demo" class="OBQList" style="overflow: hidden; width: 100%; height:152px; color:#fff; margin:0px;line-height:22px;">
      <div id="demo1">·<a href="http://gongyi.sina.com.cn/gybb/2008-08-25/15353469.html" target="_blank" style="text-decoration:none;color:#FFFFFF ">本周捐赠逾亿元(8.22发布)</a><br>
·<a href="http://gongyi.sina.com.cn/gybb/2008-08-19/17293384.html" target="_blank" style="text-decoration:none;color:#FFFFFF ">本周捐赠总额4716万元(8.15发布)</a><br>

·<a href="http://gongyi.sina.com.cn/gybb/2008-08-15/17483317.html" target="_blank" style="text-decoration:none;color:#FFFFFF ">本周捐赠总额3.113亿元(8.8发布)</a><br>
&nbsp;&nbsp;......<br>
·<a href="http://gongyi.sina.com.cn/gybb/2008-08-05/11293206.html" target="_blank" style="text-decoration:none;color:#FFFFFF ">本周捐赠总额9.6亿元(8.1发布)</a><br>
·<a href="http://gongyi.sina.com.cn/gybb/2008-07-30/09163147.html" target="_blank" style="text-decoration:none;color:#FFFFFF ">本周捐赠总额6.447亿元(7.25发布)</a><br>

·<a href="http://gongyi.sina.com.cn/gybb/2008-07-24/17343060.html" target="_blank" style="text-decoration:none;color:#FFFFFF ">本周捐赠总额11.66亿元(7.18发布)</a><br>
&nbsp;&nbsp;......<br>
·<a href="http://gongyi.sina.com.cn/gybb/2008-07-16/17592930.html" target="_blank" style="text-decoration:none;color:#FFFFFF ">本周捐赠总额13.26亿元(7.11发布)</a><br>
·<a href="http://gongyi.sina.com.cn/gybb/2008-02-25/1720679.html" target="_blank" style="text-decoration:none;color:#FFFFFF ">本周捐赠总额18.41亿元(7.04发布)</a><br>

·<a href="http://gongyi.sina.com.cn/qycs-3/2008-06-30/14302732.html" target="_blank" style="text-decoration:none;color:#FFFFFF ">本周捐赠数据139.6亿元(6.27发布)</a><br>
&nbsp;&nbsp;......<br>
</div>
      <div id="demo2"></div>
     </div>
     <script>
     var speed = 50
     var _demo = document.getElementById("demo");
     var _demo1 = document.getElementById("demo1");
     var _demo2 = document.getElementById("demo2");
     demo2.innerHTML=demo1.innerHTML
     function Marquee(){
      if(_demo2.offsetTop-_demo.scrollTop<=0){
       _demo.scrollTop-=_demo1.offsetHeight
      }else{
       _demo.scrollTop++
      }
     }
     var MyMar=setInterval(Marquee,speed)
     _demo.onmouseover=function() {clearInterval(MyMar)}
     _demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

    </script>
     <!-- 滚动文字 end -->
  </div>
   </div>
   <!-- 奥运博客圈 end -->
   <!-- P1-R2 end -->

  </div>
  <!-- P1 end -->

 </div>

  </TD>
  <TD>
   <IMG SRC="http://cs.sina.com.cn/minisite/2007gongyi/images/cn_zty_b15_04.jpg" WIDTH=1 HEIGHT=152></TD>
  <TD>
   <IMG SRC="http://cs.sina.com.cn/minisite/2007gongyi/images/cn_zty_b15_05.jpg" WIDTH=15 HEIGHT=152></TD>
 </TR>
 <TR>
  <TD COLSPAN=4>
   <IMG SRC="http://cs.sina.com.cn/minisite/2007gongyi/images/cn_zty_b15_06.jpg" WIDTH=230 HEIGHT=9></TD>
 </TR>
</TABLE>

分享到：
| jsp 常用问题
评论
2 楼 zw7534313 2013-09-26  
1 楼 hanz188 2010-04-01  
博主的代码写得太复杂了，我整理半天才找出想要的东西，其实可以把多余的部分全去掉的，像tr里面的几个td，其实都是没有用的。还有table里有几个div也是不需要的，留下id="demo1"和id="demo2"的两个div就OK了。这是我修改之后的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>不间断上下循环滚动的公告栏效果</title>
</head>
<body>
    <table width="400" border="1" cellpadding="0" cellspacing="0">
        <tr>
          <td width=200 height=152>
            <div class="RPR-P1">
                <div class="RPR-P1-R2">
                    <div id="demo" style="overflow: hidden; width: 100%; height:152px; color:white; margin:0px;line-height:22px;">
                        <div id="demo1">
                            ·<a href="javascript:alert('超链接')" style="text-decoration:none">本周捐赠逾亿元(8.22发布)</a><br>
                            ·<a href="javascript:alert('超链接')" style="text-decoration:none">本周捐赠总额4716万元(8.15发布)</a><br>
                            ·<a href="javascript:alert('超链接')" style="text-decoration:none">本周捐赠总额3.113亿元(8.8发布)</a><br>
                            ·<a href="javascript:alert('超链接')" style="text-decoration:none">本周捐赠总额9.6亿元(8.1发布)</a><br>
                            ·<a href="javascript:alert('超链接')" style="text-decoration:none">本周捐赠总额6.447亿元(7.25发布)</a><br>
                            ·<a href="javascript:alert('超链接')" style="text-decoration:none">本周捐赠总额11.66亿元(7.18发布)</a><br>
                            ·<a href="javascript:alert('超链接')" style="text-decoration:none">本周捐赠总额13.26亿元(7.11发布)</a><br>
                            ·<a href="javascript:alert('超链接')" style="text-decoration:none">本周捐赠总额18.41亿元(7.04发布)</a><br>
                            ·<a href="javascript:alert('超链接')" style="text-decoration:none">本周捐赠数据139.6亿元(6.27发布)</a><br>
			    ·<a href="javascript:alert('超链接')" style="text-decoration:none">本周捐赠总额18.41亿元(7.04发布)</a><br>
                        </div>
                        <div id="demo2">
                        </div>
                    </div>
                </div>
            </div>
          </td>
        </tr>
    </table>
<script>
     var speed = 50
     var _demo = document.getElementById("demo");
     var _demo1 = document.getElementById("demo1");
     var _demo2 = document.getElementById("demo2");
     demo2.innerHTML=demo1.innerHTML
     function Marquee(){
      if(_demo2.offsetTop-_demo.scrollTop<=0){
       _demo.scrollTop-=_demo1.offsetHeight
      }else{
       _demo.scrollTop++
      }
     }
     var MyMar=setInterval(Marquee,speed)
     _demo.onmouseover=function() {clearInterval(MyMar)}
     _demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics