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 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
js select option对象小结
Dec 20 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
使用python实现个性化词云的方法
2017/06/16 Python
python用户管理系统
2018/03/13 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
如何卸载python插件
2020/07/08 Python
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
市场督导岗位职责
2015/04/10 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
同意报考公务员证明
2015/06/17 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
Python 发送SMTP邮件的简单教程
2021/06/24 Python