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 相关文章推荐
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
js取整数、取余数的方法
May 11 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
在VUE中实现文件下载并判断状态的方法
Nov 08 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原创论坛
2006/10/09 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python类定义的讲解
2013/11/01 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
python可迭代对象去重实例
2020/05/15 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
详解Scrapy Redis入门实战
2020/11/18 Python
HTTP状态码详解
2021/03/18 杂记
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
工程质检员岗位职责
2015/04/08 职场文书
60句有关成长的名言
2019/09/04 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js