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

首尾衔接的闭合的marquee滚动js代码

    博客分类:
  • j2ee
阅读更多
<div id="adsfar">
  <table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
    <tr>
      <td bgcolor="#FFFFFF">1</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">2</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">3</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">4</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">5</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">6</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">7</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">8</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">9</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">10</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">11</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">12</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">13</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">14</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">15</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">16</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">17</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">18</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">19</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">20</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">21</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">22</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">23</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">24</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">25</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">26</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">27</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">28</td>
    </tr>
  </table>
</div>
<script type="text/javascript">
marque(320,196,"icefable1","box1left")
var scrollElem;
var stopscroll;
var stoptime;
var preTop;
var leftElem;
var currentTop;
var marqueesHeight;
function marque(width,height,marqueName,marqueCName){
    try{
      marqueesHeight = height;
      stopscroll     = false;

      scrollElem = document.getElementById("adsfar");
      with(scrollElem){
        style.width     = width;
        style.height    = marqueesHeight;
        style.overflow  = 'hidden';
        noWrap          = true;
      }

      scrollElem.onmouseover = new Function('stopscroll = true');
      scrollElem.onmouseout  = new Function('stopscroll = false');

      preTop     = 0;
      currentTop = 0;
      stoptime   = 0;

      leftElem = document.getElementById("adsfar");
      scrollElem.appendChild(leftElem.cloneNode(true));
         
      init_srolltext();

    }catch(e) {}
}
function init_srolltext(){
  scrollElem.scrollTop = 0;
  setInterval('scrollUp()', 18);
}

function scrollUp(){
  if(stopscroll) return;
  currentTop += 1;
  if(currentTop == marqueesHeight+1) {
    stoptime += 1;
    currentTop -= 1;
    if(stoptime == (marqueesHeight)*1) {//停顿时间
      currentTop = 0;
      stoptime = 0;
    }
  }else{

    preTop = scrollElem.scrollTop;
    scrollElem.scrollTop += 1;
    if(preTop == scrollElem.scrollTop){
      scrollElem.scrollTop = marqueesHeight;
      scrollElem.scrollTop += 1;
    }
  }
}
</Script>
分享到:
评论

相关推荐

    marquee图片无缝滚动(上下左右均可)

    6. **使用和配置**:使用这样的插件通常涉及引入相关的JavaScript库,然后在HTML中创建相应的元素,并通过CSS和JavaScript代码进行配置和定制。 7. **响应式设计**:在现代网页设计中,考虑到不同设备和屏幕尺寸,...

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

    在提供的代码示例中,通过JavaScript结合CSS实现了一个类似`&lt;marquee&gt;`标签的无缝循环滚动效果。 - **关键代码解析**: - **CSS样式**:定义了滚动区域的背景颜色、溢出隐藏、宽度和高度等样式。 - **HTML结构**...

    marquee.js插件演示9种jQuery滚动效果

    通过将两者结合,开发者可以轻松地在网页上创建出引人注目的滚动内容,无需深入了解底层的CSS和JavaScript代码。 ### 2. marquee.js的9种滚动效果 `marquee.js`提供了9种独特的滚动样式,以满足不同场景的需求: ...

    marquee滚动效果源代码

    这个标题"marquee滚动效果源代码"表明我们将探讨如何利用marquee标签实现两种特定的滚动效果:间歇性滚动和无缝滚动。 间歇性滚动,也称为定时滚动,是指内容不是连续不断地滚动,而是每隔几秒钟滚动一次。这种效果...

    js Marquee上下滚动效果

    然后,我们可以编写如下的JavaScript代码: ```javascript // 获取滚动区域元素 var scrollingArea = document.getElementById('scrollingArea'); // 设置初始位置 var topPosition = 0; // 定义滚动速度(像素/秒...

    JS实现无缝循环marquee滚动效果

    无缝循环marquee滚动JS代码实现,兼容IE, FireFox, Chrome,供大家参考,具体内容如下 首先是CSS和HTML如下: #marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; ...

    jquery.marquee.js官方下载

    在Web开发中,滚动效果常常用于吸引用户的注意力,jQuery.marquee.js就是一款专为实现这种滚动效果而设计的JavaScript插件。该插件基于广泛使用的jQuery库,使得创建无缝、自定义的滚动效果变得简单易行。本文将对...

    js图片向上下左右滚动的代码 图片向上滚动js代码

    首先,我们来看标题和描述中提到的关键点:`js图片向上下左右滚动的代码` 和 `图片滚动`。这些关键词暗示我们要创建一个JavaScript函数,该函数能够控制HTML中的图片元素沿着四个方向(上、下、左、右)平滑滚动。 ...

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

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

    分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码

    `onstart`属性中的JavaScript代码`this.firstChild.innerHTML+=this.firstChild.innerHTML;`实现了首尾相连的效果,即当内容滚动到底部时,将其复制到开头,形成无缝滚动。此外,`scrollamount="3"`定义了滚动速度,...

    JS无间隔滚动代码,javascript,marquee

    创建一个无间隔滚动的JavaScript代码,主要涉及以下几个核心概念: 1. **DOM操作**:首先,你需要通过JavaScript获取到需要滚动的元素,这通常通过`document.getElementById`、`document.querySelector`或`document...

    图片无限连续滚动的js代码

    "图片无限连续滚动的js代码"就是一种实现这种效果的技术,它基于JavaScript语言,类似于HTML中的`&lt;marquee&gt;`标签,但提供了更为灵活和可控的滚动体验。下面我们将详细探讨这个主题。 1. **JavaScript基础**: ...

    Javascript实现Marquee的滚动功能

    经典的通过Marquee标签来控制滚动有许多不尽人意的地方,这一点想必略通网页设计的人都知道。鄙人上传的此脚本(含Demo)是一个Marquee类,开放了几个接口轻松实现滚动的方向、延时、尺寸等参数的设置,对从事网页...

    滚动图片,js滚动图片代码,js特效

    本文将详细介绍如何利用纯JavaScript实现滚动图片的效果,并对代码进行逐行解析。 #### 二、HTML 结构分析 在 HTML 部分,我们首先定义了一个包含两个 `&lt;td&gt;` 的 `&lt;table&gt;` 元素,其中第一个 `&lt;td&gt;` 包含了多个 `...

    javascript特效无缝滚动marquee

    - 由于篇幅限制,无法在此提供完整的代码,但可以提供一个简单的向左滚动的JavaScript框架: ```javascript function createMarquee(elementId, speed) { var container = document.getElementById(elementId); ...

    jquery.marquee.js

    在提供的压缩包文件中,有两个文件:`jquery.marquee.js`是未压缩的源代码版本,适合调试和学习;而`jquery.marquee.min.js`则是经过压缩的版本,体积更小,适用于生产环境以优化页面加载速度。 下面是一个基本的...

    jQuery 模拟 Marquee 无缝滚动 不间断滚动

    在 `js` 文件夹中的 JavaScript 文件中,引入 jQuery 库(如果还没有的话),然后编写以下代码来实现无缝滚动效果: ```javascript $(document).ready(function() { var marquee = $('#myMarquee'); var width ...

    图片首尾相接 上下滚动.html javascript

    绝对好用 部分代码如下: &lt;script&gt; var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetTop-

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

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

Global site tag (gtag.js) - Google Analytics