javascript实现文字无缝滚动


Posted in Javascript onDecember 27, 2016

效果如图:

javascript实现文字无缝滚动

html:( 一个div 包裹两个ul )

<div style="position: absolute; left: 500px; top: 200px; background-color: white; 
 height: 140px; width: 400px; border: solid; 1px; overflow: hidden;" id="box">
 <ul id="ul1">
 <li><a href="#">1.学会html5 绝对的?潘磕嫦?ò咐??lt;/a><span>2013-09-18</span></li>
 <li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li>
 <li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li>
 <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
 <li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li>
 <li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li>
 <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
 <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
 <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li> 
 </ul>

 <ul id="ul2"></ul> 

 </div>

js代码:

window.onload=roll;
function roll(){
 var ul1=document.getElementById("ul1");
 var ul2=document.getElementById("ul2");
 var box=document.getElementById("box");
 ul2.innerHTML=ul1.innerHTML;
 box.scrollTop = 0;
 var timer=setInterval(rollStart,50);
 box.onmouseover=function(){
  clearInterval(timer)
 }
 box.onmouseout=function(){
  timer=setInterval(rollStart,50);
 }


 }
 function rollStart(){
 if (box.scrollTop>=ul1.scrollHeight) {//scrollTop属性既是scroll最上端和box的距离
  box.scrollTop=0;
 }else{
  box.scrollTop++;
 } 
 }

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

Javascript 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
我见过最全的个人js加解密功能页面
Dec 12 Javascript
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
js获取div高度的代码
Aug 09 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
JavaScript仿聊天室聊天记录
Dec 27 #Javascript
基于jQuery实现顶部导航栏功能
Dec 27 #Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 #Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 #Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 #Javascript
js点击任意区域弹出层消失实现代码
Dec 27 #Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 #Javascript
You might like
PHP文件注释标记及规范小结
2012/04/01 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
vue实现通讯录功能
2018/07/14 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
js实现微信聊天效果
2020/08/09 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Python中super函数的用法
2017/11/17 Python
Python实现k-means算法
2018/02/23 Python
Python 支付整合开发包的实现
2019/01/23 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
眼镜促销方案
2014/03/15 职场文书
高中开学感言
2015/08/01 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP