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 相关文章推荐
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 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
如何做到多笔资料的同步
2006/10/09 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python 以16进制打印输出的方法
2018/07/09 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
python opencv实现证件照换底功能
2019/08/19 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
护士自我鉴定范文
2013/10/06 职场文书
大学生求职自我评价
2014/01/16 职场文书
教师党员一句话承诺
2014/03/28 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
机关搬迁方案
2014/05/18 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
实习单位意见
2015/06/04 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
django上传文件的三种方式
2021/04/29 Python
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers