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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
eval的两组性能测试数据
Aug 17 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
javascript表单正则应用
Feb 04 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
详解AngularJS 模块化
Jun 14 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
学前端,css与javascript重难点浅析
Jun 11 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安全配置方法
2007/06/16 PHP
解析yii数据库的增删查改
2013/06/20 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
webpack引入eslint配置详解
2018/01/22 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
国家励志奖学金获奖感言
2014/01/09 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
活动总结模板
2014/05/09 职场文书
如何写早恋检讨书
2014/09/10 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
青年联谊会致辞
2015/07/31 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python