`
J_Fox
  • 浏览: 17817 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
文章分类
社区版块
存档分类
最新评论

js实现闭合的marquee滚动

 
阅读更多
<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>

分享到:
评论

相关推荐

    JS实现简单的文字无缝上下滚动功能示例

    本知识点将详细介绍如何使用JavaScript(JS)实现一个简单的文字无缝上下滚动效果,这种效果在告示牌、广告以及通知等场景中被广泛应用。 首先,理解标题中的“文字无缝上下滚动功能示例”,它意味着创建一个滚动...

    jquery无缝滚动

    为了方便开发者,许多已经封装好的jQuery无缝滚动插件可供使用,例如jQuery.scrollify、jQuery.Marquee等。这些插件通常提供了丰富的配置选项,如滚动速度、方向、暂停等,可以轻松实现自定义的无缝滚动效果。 六、...

    Marquee标记在XHTML代码中该如何用

    如果要在XHTML中使用这段JavaScript代码,你需要在需要实现滚动效果的元素外围添加一个特定的class,比如"ccMarquee",然后通过JavaScript代码动态地给这些元素添加Marquee效果。需要注意的是,在使用这些功能时,要...

    DOCTYPE html PUBLIC.doc

    6. **向下滚动代码**:这段代码与水平滚动类似,只是用不同的ID(如`#colee_bottom`和`#colee_bottom1`)和JavaScript逻辑来实现垂直方向的滚动效果。 7. **浏览器兼容性**:这个例子中的代码考虑了火狐(Firefox)...

    html代码大全

    - `&lt;marquee direction="down"&gt;&lt;/marquee&gt;`、`&lt;marquee direction="up"&gt;&lt;/marquee&gt;`、`&lt;marquee direction="right"&gt;&lt;/marquee&gt;`、`&lt;marquee direction="left"&gt;&lt;/marquee&gt;`分别用于设置滚动方向。 - `&lt;marquee loop...

    xss特殊字符拦截与过滤

    2. 将&lt;marquee&gt;标签进行替换,防止通过滚动字幕代码实现的攻击。 3. 替换单引号和双引号,防止在脚本中恶意使用引号来闭合字符串,造成注入。 代码中还展示了一个通用的replace方法,该方法接收四个参数,分别是源...

    JavaScript笔记

    - **`&lt;marquee&gt;`**:滚动条标签,用于创建滚动效果。 - **`behavior`属性**:定义滚动行为,如`slide`(滑动)、`scroll`(滚动)、`alternate`(交替)。 - **`direction`属性**:定义滚动方向,如`up`、`down`、...

    让超链接显示提示信息的js代码

    本文将详细介绍一种实现这一功能的JavaScript方法,并对其进行深入分析。 #### 标题:让超链接显示提示信息的js代码 此标题简洁明了地指出了本文档的核心内容——如何通过JavaScript来实现在鼠标悬停于超链接时...

    HTML语言与网页设计期末考试题.pdf

    这个说法不正确,HTML允许在滚动字幕(如`&lt;marquee&gt;`标签)中嵌入图像。 在单选题部分,涉及的知识点包括: - WWW的含义是万维网。 - 特殊字符在HTML中使用实体名称(entity name)表示,例如`对应`&lt;`。 - 列表...

    HTML语言与网页设计期末考试题 (2).pdf

    10. 滚动字幕(marquee)可以嵌入图象,只要在`&lt;marquee&gt;`标记符内正确放置图像标记符`&lt;img&gt;`即可。 复习题中还涉及到HTML的一些其他知识点: 1. `FONT`标记符的`size`属性用于设定字体大小,可以使用1到7的数字或...

    HTML语言与网页设计期末考试题参考.pdf

    创建滚动字幕时,可以使用`&lt;marquee&gt;`标签,且可以嵌入图象。 在HTML中,`&lt;a&gt;`标签用于创建链接,`&lt;img&gt;`标签用于插入图像,图像的URL放在`src`属性中。特殊字符的显示通过实体引用完成,例如`表示小于号。列表分为...

    html+css 课件

    &lt;marquee&gt;滚动的文字&lt;/marquee&gt; ``` - **`&lt;img&gt;`**:插入图片。 ```html 描述性文本" width="50%"&gt; ``` #### 四、链接标签 `&lt;a&gt;` - **基本用法**: ```html 提示文本"&gt;链接文本 ``` - **`href`**:指定...

    HTML总结应用

    ... ... ...`&lt;head&gt;`中存放元数据,如标题、样式、脚本引用等;...然而,随着Web技术的发展,一些标签如`&lt;font&gt;`、`&lt;marquee&gt;`已逐渐被更现代的CSS和JavaScript所取代,开发者应关注并学习最新的Web标准和最佳实践。

    网站建设复习题.docx

    使用 `&lt;marquee&gt;` 标签可以实现滚动字幕效果,并且可以在其中嵌入图像。 6. **在HTML表格中,在TR、TD或TH标记符中使用align属性可以控制单元格内容的垂直对齐**。 - 实际上,`align` 属性主要用于水平对齐。对于...

    Lesson01_01 HTML基础

    - `&lt;marquee&gt;`:滚动文本或图像标签。 - `&lt;font&gt;`:用于指定文本的字体、大小和颜色。注意,在HTML5中已废弃,建议使用CSS替代。 - `size`属性:设置文本大小。 - `color`属性:设置文本颜色。 - **标签的属性**...

Global site tag (gtag.js) - Google Analytics