javascript实现文字无缝滚动效果
时间:2019-03-31
本文章向大家介绍javascript实现文字无缝滚动效果,主要包括javascript实现文字无缝滚动效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了文字无缝滚动效果,供大家参考,具体内容如下
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php文件操作之文件写入字符串、数组的方法分析
- php xhprof使用实例详解
- PHP获取远程http或ftp文件的md5值的方法
- PHP addslashes()函数讲解
- PHP+swoole+linux实现系统监控和性能优化操作示例
- PHP中PCRE正则解析代码详解
- tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
- 使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
- python 抓取知乎指定回答下视频的方法
- 基于python实现计算两组数据P值
- PHP getNamespaces()函数讲解
- OpenCV 使用imread()函数读取图片的六种正确姿势
- PHP simplexml_import_dom()函数讲解
- PHP getName()函数讲解
- Laravel框架集成UEditor编辑器的方法图文与实例详解