javascript实现文字无缝滚动效果


Posted in Javascript onAugust 26, 2017

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

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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
angular动态表单制作
Feb 23 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
node实现定时发送邮件的示例代码
Aug 26 #Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
get  post jsonp三种数据交互形式实例详解
Aug 25 #Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 #Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 #Javascript
AngularJS select设置默认值的实现方法
Aug 25 #Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 #Javascript
You might like
php仿ZOL分页类代码
2008/10/02 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
react路由配置方式详解
2017/08/07 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
React路由管理之React Router总结
2018/05/10 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python队列queue模块详解
2018/04/27 Python
python发送邮件脚本
2018/05/22 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
Python创建字典的八种方式
2019/02/27 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python获取时间戳代码实例
2019/09/24 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
同居协议书范本
2014/04/23 职场文书
课例研修方案
2014/05/31 职场文书