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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
express框架下使用session的方法
Jul 31 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 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
基于PHP异步执行的常用方式详解
2013/06/03 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
PHP微信支付实例解析
2016/07/22 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
JS 进度条效果实现代码整理
2011/05/21 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
详解Python中的文件操作
2016/08/28 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Pycharm调试程序技巧小结
2020/08/08 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
《难忘的泼水节》教学反思
2014/02/27 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
七年级作文之环保作文
2019/10/17 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python