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 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
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 session 预定义数组
2009/03/16 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
javascript 获取网页参数系统
2008/07/19 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
python中bisect模块用法实例
2014/09/25 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
人大代表选举标语
2014/10/07 职场文书
2014年质检员工作总结
2014/11/18 职场文书
同学聚会通知短信
2015/04/20 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技