`
橄榄绿
  • 浏览: 277270 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS不间断循环滚动

HTML 
阅读更多

<html>
<BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0">
<CENTER>
<p>
<h1>JS不间断循环滚动</h1><p>
  <TABLE 
style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid" 
cellSpacing=0 cellPadding=0 width=750 align=center border=0>
  <TBODY>
  <TR><td width="30"><a href="#" onClick="clickdiv()" id="aa">向左</a></td>
    <TD>
      <DIV id=demo style="OVERFLOW: hidden; WIDTH: 750px; COLOR: #ffffff">
      <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
        <TBODY>
        <TR>
          <TD id=demo1 vAlign=top><table width="1710" height="116"  border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="171" background="pic_bg.jpg"><div align="center">内容一</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容二</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容三</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容四</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容五</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容六</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容七</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容八</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容九</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容十</div></td>
            </tr>
          </table></TD>
          <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
     
    </TD><td width="30"><a href="#" onClick="Rclickdiv()" id="mcc">向右</a></td></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER><SCRIPT>
var speed3=25//速度数值越大速度越慢
var t=false;
var id="aa";
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee(){
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
else{
document.getElementById("demo").scrollLeft++
}
t=false;
}
function RMarquee(){ 
if(document.getElementById("demo").scrollLeft<=0)
  document.getElementById("demo").scrollLeft+=document.getElementById("demo2").offsetWidth
  else{
  document.getElementById("demo").scrollLeft--
  }
  t=true;

}
function clickdiv(){
clearInterval(MyMar)
Marquee();
}
function Rclickdiv(){
clearInterval(MyMar)
RMarquee();
}
var MyMar=setInterval(Marquee,speed3)
document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}
document.getElementById("demo").onmouseout=function() {if(t){MyMar=setInterval(RMarquee,speed3)}else{MyMar=setInterval(Marquee,speed3)}}
document.getElementById('mcc').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(RMarquee,speed3);}
document.getElementById('aa').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(Marquee,speed3);}
</SCRIPT>
</BODY>
</html>

分享到：
| cvsNT2.5.03与Eclipse3.2配置日记
评论
发表评论

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

相关推荐

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

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

    JS不间断向左右循环滚动

    JavaScript（简称JS）是一种轻量级的编程...总的来说，实现JS不间断左右循环滚动是一个涉及HTML布局、CSS样式和JavaScript动态控制的综合过程。通过理解和实践这些技术，你可以创建出富有动态感和吸引力的网页元素。

    JS不间断向上滚动

    在网页设计中，"不间断向上滚动"是一种常见的特效，它使得页面内容以连续、循环的方式从底部向上滚动，给予用户一种新颖的浏览体验。这种效果在新闻网站、公告栏或者展示大量文本信息的场景中尤为常见。 实现JS不...

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

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

    JS不间断向左滚动无缝隙

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

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

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

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

    这个示例中，我们设置了每10毫秒滚动一次，每次滚动5像素，当文本完全滚动出去后，会自动重置到初始位置，形成无限循环滚动的效果。实际应用中，可能需要根据实际文本内容和页面布局调整滚动速度和步长。 此外，还...

    不间断图片循环滚动示例

    在IT领域，尤其是在网页设计和用户体验优化中，"不间断图片循环滚动示例"是一个常见的功能需求，主要用于展示一系列图片或信息，以吸引用户的注意力并提供动态的视觉效果。这一技术通常应用于广告轮播、产品展示或者...

    JS不间断向上滚动.rar

    在网页设计中，"JS不间断向上滚动"通常指的是使用JavaScript实现的一种动态效果，它可以使页面中的内容持续不断地向上滚动，给用户带来一种连续更新的视觉体验。这种效果常用于新闻滚动、公告栏或者社交媒体的实时...

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

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

    不间断无缝滚动图片

    通常，我们会将多张图片放在一个容器内，然后通过CSS设置容器的宽度和溢出隐藏，这样图片就会在容器内部循环滚动。图片的布局可以是横向或纵向，取决于设计需求。 接着，我们利用JavaScript来控制图片的滚动。...

    JS不间断向左滚动

    【JS不间断向左滚动】是一种常见的网页动态效果，主要用于展示一系列内容，如新闻滚动、广告轮播等。这种效果能够使页面保持活力，吸引用户的注意力。在本文中，我们将深入探讨如何利用JavaScript实现这一功能，并...

    Marquee Scroll通用不间断滚动JS封装类

    Marquee Scroll通用不间断滚动JS封装类是一种常见的JavaScript技术，用于实现网页元素的自动滚动效果，常见于新闻滚动、公告栏等场景。这类封装类的主要目的是简化开发者的工作，提供一种便捷的方式来实现不同方向...

    不间断 滚动图片 滚动文字

    不间断滚动图片通常通过JavaScript、jQuery或现代前端框架如Vue、React来实现。基本思路是设置一个定时器，每隔一定时间更新图片的位置，给用户造成图片在不断滚动的视觉效果。具体步骤如下： - 使用CSS将图片容器...

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

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

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

    // 循环滚动 }, 200); // 每200毫秒滚动一次 } // 页面加载完成后执行滚动函数 window.addEventListener('DOMContentLoaded', function () { scrollText(); }); ``` 在上述代码中，`split('\n')`将文本按换行符...

    jQuery 模仿 Marquee 间歇式 无缝滚动 不间断滚动

    3. **jQuery代码**：在`js`文件中，我们可以编写JavaScript代码来控制滚动。这里我们可以使用`animate()`方法实现动画效果，并通过`setTimeout()`函数实现间歇式滚动。 ```javascript $(document).ready(function()...

    JS不间断向左滚动.rar

    在本案例中，“JS不间断向左滚动”是一个使用JavaScript实现的网页元素动态效果，通常用于展示新闻、公告或广告等信息，使内容能够不间断地从右向左自动滚动，增加用户的浏览体验。 该压缩包“JS不间断向左滚动.rar...

    JS不间断向下滚动.rar

    "JS不间断向下滚动"通常是指利用JavaScript实现页面内容持续自动滚动的效果，这种效果常见于新闻滚动、公告滚动等应用场景，能够使用户在不手动操作的情况下看到不断更新的信息。 在实现JS不间断向下滚动的过程中，...

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