`

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>
发表评论

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

相关推荐

    jQuery单行文字上下不间断循环滚动效果，适合做新闻滚动推荐

    标题和描述提到的"jQuery单行文字上下不间断循环滚动效果"就是一个这样的实例，它主要用于创建一串文字在单一行内循环滚动，通常用于网站的头部或侧边栏，以动态展示最新的新闻标题或公告。 要实现这个效果，首先...

    利用Marquee实现无缝循环滚动文字

    ### 利用Marquee实现无缝循环滚动文字 在网页设计中，为了使页面更加生动、吸引人，常常会使用到动态效果。其中一种常见的动态效果就是利用`&lt;marquee&gt;`标签来实现文字或图片的自动滚动。不过，在提供的代码片段中，...

    JS无间断图片循环滚动效果html版

    JS无间断图片循环滚动效果html版 JS无间断 图片循环 JS滚动效果 无间断滚动

    JS不间断向左右循环滚动

    本教程将详细讲解如何使用JS实现图片的不间断左右循环滚动效果。 首先，我们需要理解核心概念：滚动。在网页中，滚动通常涉及到元素的动态移动，这可以通过改变其CSS属性来实现。这里的"不间断"意味着滚动效果应该...

    js 文字无限,有间断往上滚动

    在探讨“JS文字无限，有间断往上滚动”的技术实现时，我们首先需要理解这个功能的基本概念：通过JavaScript（简称JS）实现一段文本或多个文本元素在网页上以连续但带有间断的方式向上滚动，同时当滚动到一定程度时，...

    简单的无间断图片循环

    ### 知识点：简单的无间断图片循环 #### 一、概述 本文将详细介绍如何通过HTML和JavaScript实现一个简单的无间断图片循环效果。这种技术常用于网站设计中的轮播图或者背景动画等场景，能够使图片在网页上平滑、...

    无间断图片循环滚动效果.rar

    无间断图片循环滚动效果是一种常见的网页动态展示技术，常用于网站广告轮播、产品展示等场景。这种效果能够使一组图片在用户面前连续、平滑地切换，营造出一种不间断的视觉体验。在JavaScript（JS）中实现这种效果，...

    实现连续滚动文字效果，无间断

    根据给定文件的信息，本文将详细介绍如何实现网页上连续滚动的文字效果，并确保其无间断地展示。在实际开发过程中，这种效果常用于新闻滚动、公告栏等场景，能够有效地吸引用户注意力并传达重要信息。 ### 实现原理...

    推荐通用文字图片JS不间断滚动封装类 代替Marquee

    标题提到的"推荐通用文字图片JS不间断滚动封装类 代替Marquee"，就是一种利用JavaScript实现的动态效果，它旨在为文字和图片提供一种类似传统的Marquee（滚动条）效果，但更加灵活且易于使用的解决方案。Marquee是...

    jquery版文字水平方向无限循环滚动.zip

    标题中的“jquery版文字水平方向无限循环滚动”指的是一个基于jQuery实现的JavaScript特效，它使得文字能够在水平方向上持续、不间断地循环滚动。这个技术在网页设计中常用于展示新闻标题、广告语或者滚动公告等，能...

    JS不间断向左滚动无缝隙

    JS不间断向左滚动javascript无缝隙

    javascript不间断文字滚动控制代码

    在网页设计中，不间断文字滚动（也称为跑马灯或滚动公告）是一种常见的效果，用于显示大量的文本内容，例如新闻更新、公告或广告。这种效果能够节省页面空间，同时吸引用户的注意力。 在标题中提到的“javascript不...

    JS不间断向上滚动

    JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和动态效果的实现。在网页设计中，"不间断向上滚动"是一种常见的特效，它使得页面内容以连续、循环的方式从底部向上滚动，给予用户一种新颖的浏览体验。...

    图片不间断向左滚动,js图片向左不间断滚动

    下面我们将深入探讨如何使用JavaScript实现图片不间断向左滚动的原理与方法。 首先，我们需要一个包含多个图片的HTML结构，每个图片元素可以是一个`&lt;img&gt;`标签或者一个`&lt;div&gt;`标签内嵌图片。这些图片通常会被设置为...

    JS实现文本不间断上线滚动效果【转】

    在这个特定的场景中，我们讨论的是如何使用JavaScript实现文本不间断上线滚动效果，这种效果常见于新闻网站的滚动公告或者滚动字幕。 要实现这种效果，首先我们需要创建一个HTML结构，包含一个可以容纳滚动文本的...

    不间断 滚动图片 滚动文字

    在IT行业中，"不间断滚动图片"和"滚动文字"是一种常见的网页动态效果，常用于新闻网站、广告展示或产品介绍等场景。这种效果能够吸引用户的注意力，提高信息的传播效率。接下来，我们将深入探讨实现这些效果的技术...

    无缝循环滚动插件

    - `js`：JavaScript代码通常放在这里，可能包含jQuery库以及无缝循环滚动插件的源代码。 - `css`：CSS样式表，用于定义元素的外观和布局，以及滚动动画的样式。 通过分析这些文件，我们可以了解插件的工作原理，并...

    不间断上下滚动公告代码.rar

    【标题】"不间断上下滚动公告代码.rar"是一个包含JavaScript实现的滚动公告效果的代码资源。在网页设计中，滚动公告通常用于展示重要的信息或者更新，它以动态的方式吸引用户的注意力，使得信息传递更加高效。 ...

    js无缝滚动制作js文字无缝滚动和js图片无缝滚动

    无缝滚动可以让内容不间断地、平滑地在页面上滚动，给浏览者带来流畅的视觉体验。 1. **基础概念** - **DOM（Document Object Model）**：JS操作网页内容的主要方式就是通过DOM，它是一个树形结构，表示了HTML或...

    jQuery实现网站中公告上下无缝滚动，marquee

    jQuery 是一个广泛使用的 JavaScript 库，它简化了DOM操作、事件处理和动画效果，因此用jQuery来实现公告的上下无缝滚动是理想的选择。在本教程中，我们将深入探讨如何使用jQuery实现这个功能。 首先，我们需要在...

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