使用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语言的重要部分(函数、闭包和原型)进行深入、全面的介绍,也没有任何一本书讲述跨浏览器代码的编写。本书是
大小:83.5 MBJavaScript电子书
-
JavaScript语言精粹
JavaScript曾是全世界非常容易误解的言语,由于它肩负过多的特点,包含槽糕的互动和不成功的设计方案,但伴随着Ajax的来临,JavaScript从极受误会的程序语言演化为十分时髦的言语,这除开好
大小:9.9 MBJavaScript电子书
-
21天学通HTML+CSS+JavaScript Web开发
21天学通HTML CSS JavaScript Web开发(第7版) 是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本,作者在本书囊括了新的HTML5与CSS3技术,并采用易于理解的步骤式教程讲解了这些技
大小:104.9 MB前端电子书
-
HTML5+CSS3+JavaScript从入门到精通
本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML,CSS,JavaScript及目前最新的前端技术
大小:186 MBweb开发电子书
-
学习JavaScript数据结构与算法(第3版)
大小:13.6 MBJavaScript电子书
-
第三方JavaScript编程
第三方JavaScript应用程序是自包含的应用组件,通常都是小脚本或插件,能够为Web站点增加功能。它们往往是由独立的组织或个人提供的,代码和文件都是来自于远程的Web地址。 《第三方JavaS
大小:74.2 MBJavaScript电子书
-
JavaScript核心技术开发解密
这本书针对JavaScript 中的核心技术,结合前沿开发实践,全面的讲解与分析JavaScript 的内存、函数、执行上下文、面向对象、模块等重点知识
大小:68.4 MBJavaScript电子书
-
JavaScript基础教程
本书是经典的JavaScript入门书,以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式
大小:14 MBJS教程电子书
-
JavaScript数据可视化编程
大小:61.8 MBjs编程电子书