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 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
AJAX架构之Dojo篇
Apr 10 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
node.js +mongdb实现登录功能
Jun 18 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/12/06 PHP
PHP Token(令牌)设计
2008/03/15 PHP
php在字符串中查找另一个字符串
2008/11/19 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
谈谈Python中的while循环语句
2019/03/10 Python
python解包用法详解
2021/02/17 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
护理学中专毕业生求职信
2013/11/11 职场文书
感恩教育月活动总结
2014/07/07 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
介绍信怎么写
2015/01/30 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Python集合set()使用的方法详解
2022/03/18 Python