使用javascript如何实现文字无缝滚动

  • 更新时间:2020-03-12 16:01:00
  • 编辑:乜乐枫

本文实例为大家分享了文字无缝滚动效果,供大家参考,具体内容如下

html

<dl id="marquee" class="marquee">
  <dt>
    <ul class="right-content">
      <li>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a> 
      </li>
      <li>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a> 
      </li>
      <li>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a> 
      </li>
      ...
    </ul>
  </dt>
  <dd></dd>
</dl>

js

<script>
    $(function(){
        Marquee("marquee");
    })

    //订单滚动
    var Marquee = function(id){
      var container = document.getElementById(id), 
      original = container.getElementsByTagName("dt")[0], 
      clone = container.getElementsByTagName("dd")[0],
      liLength=original.getElementsByTagName("li").length,
      speed = 55;
      if(liLength<=8){
        return
      }
      clone.innerHTML = original.innerHTML;

      var rolling = function(){
        if (container.scrollTop === clone.offsetHeight) {
          container.scrollTop = 0;
        }
        else {
          container.scrollTop++;
        }
      }
      var timer = setInterval(rolling, speed)//设置定时器
      container.onmouseover = function(){
        clearInterval(timer)
      }//鼠标移到marquee上时,清除定时器,停止滚动
      container.onmouseout = function(){
        timer = setInterval(rolling, speed)
      }//鼠标移开时重设定时器
    }    
 </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

相关教程

  • jQuery的内容过滤选择器学习教程

    这篇文章主要介绍了jQuery的内容过滤选择器学习教程,详细地整理了jQuery中四个过滤器的相关函数用法,需要的朋友可以参考下

    发布时间:2019-07-24

  • 基于JavaScript实现数码时钟效果

    这篇文章主要为大家详细介绍了基于JavaScript实现数码时钟效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2019-07-25

  • JavaScript忍者秘籍

    JavaScript忍者秘籍

    JavaScript语言非常重要,相关的技术图书也很多,但没有任何一本书对JavaScript语言的重要部分(函数、闭包和原型)进行深入、全面的介绍,也没有任何一本书讲述跨浏览器代码的编写。本书是

    大小:83.5 MBJavaScript电子书

  • JavaScript语言精粹

    JavaScript语言精粹

    JavaScript曾是全世界非常容易误解的言语,由于它肩负过多的特点,包含槽糕的互动和不成功的设计方案,但伴随着Ajax的来临,JavaScript从极受误会的程序语言演化为十分时髦的言语,这除开好

    大小:9.9 MBJavaScript电子书

  • 21天学通HTML+CSS+JavaScript Web开发

    21天学通HTML+CSS+JavaScript Web开发

    21天学通HTML CSS JavaScript Web开发(第7版) 是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本,作者在本书囊括了新的HTML5与CSS3技术,并采用易于理解的步骤式教程讲解了这些技

    大小:104.9 MB前端电子书

  • HTML5+CSS3+JavaScript从入门到精通

    HTML5+CSS3+JavaScript从入门到精通

    本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML,CSS,JavaScript及目前最新的前端技术

    大小:186 MBweb开发电子书

  • 学习JavaScript数据结构与算法(第3版)

    学习JavaScript数据结构与算法(第3版)

    大小:13.6 MBJavaScript电子书

  • 第三方JavaScript编程

    第三方JavaScript编程

    第三方JavaScript应用程序是自包含的应用组件,通常都是小脚本或插件,能够为Web站点增加功能。它们往往是由独立的组织或个人提供的,代码和文件都是来自于远程的Web地址。 《第三方JavaS

    大小:74.2 MBJavaScript电子书

  • JavaScript核心技术开发解密

    JavaScript核心技术开发解密

    这本书针对JavaScript 中的核心技术,结合前沿开发实践,全面的讲解与分析JavaScript 的内存、函数、执行上下文、面向对象、模块等重点知识

    大小:68.4 MBJavaScript电子书

  • JavaScript基础教程

    JavaScript基础教程

    本书是经典的JavaScript入门书,以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式

    大小:14 MBJS教程电子书

  • JavaScript数据可视化编程

    JavaScript数据可视化编程

    大小:61.8 MBjs编程电子书

用户留言