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 相关文章推荐
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 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
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
CI框架常用函数封装实例
2016/11/21 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
javascript动态加载二
2012/08/22 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
python实现划词翻译
2020/04/23 Python
python中去空格函数的用法
2014/08/21 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
买卖协议书范本
2014/04/21 职场文书
大班幼儿评语大全
2014/04/30 职场文书
一份文言文检讨书
2014/09/13 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android