js实现文字列表无缝滚动效果


Posted in Javascript onJune 23, 2017

本文实例为大家分享了js文字列表无缝滚动的具体代码,供大家参考,具体内容如下

HTML代码:

<div id="rule">
    <div class="list" id="list">
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
     <p>用户185****0000 获得XXX优惠券</p>
    </div>
  <div class="list2" id="list2"></div>
</div>

JavaScript代码

var speed=50;
var list=document.getElementById('list');
var list2=document.getElementById('list2');
var rule=document.getElementById('rule');
list2.innerHTML=list.innerHTML;
function Marquee(){
 if(list2.offsetTop-rule.scrollTop<=0)
  rule.scrollTop-=list.offsetHeight;
 else{
  rule.scrollTop++;
 }
}
var MyMar=setInterval(Marquee,speed);
rule.onmouseover=function() {clearInterval(MyMar)}
rule.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的new的使用方法与注意事项
May 16 Javascript
Javascript 面向对象特性
Dec 28 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
jquery图片放大镜效果
Jun 23 #jQuery
Avalonjs双向数据绑定与监听的实例代码
Jun 23 #Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 #Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 #Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 #jQuery
详解webpack异步加载业务模块
Jun 23 #Javascript
详解微信第三方小程序代开发
Jun 23 #Javascript
You might like
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
浅谈Python中函数的参数传递
2016/06/21 Python
python difflib模块示例讲解
2017/09/13 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
python IP地址转整数
2020/11/20 Python
python实现猜拳游戏项目
2020/11/30 Python
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
毕业设计计划书
2014/01/09 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
情人节寄语大全
2014/04/11 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
社区戒毒工作方案
2014/06/04 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
DSP接收机前端设想
2022/04/05 无线电