JS实现简单的文字无缝上下滚动功能示例


Posted in Javascript onJune 22, 2019

本文实例讲述了JS实现简单的文字无缝上下滚动功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="author" content="" />
 <title>文字列表无缝滚动代码</title>
 <style type="text/css">
  *{
   margin:0px;
   padding:0px;
   border:0px;
  }
  body{font-size:12px}
  #demo{
   overflow:hidden;
   height:80px;
   width:280px;
   margin:90px auto;
   position:relative;
  }
  #demo1{
   height:auto;
   text-align:left;
  }
  #demo2{
   height:auto;
   text-align:left;
  }
  #demo1 li{
   list-style-type:none;
   height:22px;
   text-align:left;
   text-indent:15px;
  }
  #demo2 li{
   list-style-type:none;
   height:22px;
   text-align:left;
   text-indent:15px;
  }
 </style>
</head>
<body>
<div id="demo">
 <ul id="demo1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
 </ul>
 <div id="demo2"></div>
</div>
<script type="text/javascript">
 var speed=40
  // 向上滚动
  var demo=document.getElementById("demo");
  var demo2=document.getElementById("demo2");
  var demo1=document.getElementById("demo1");
  demo2.innerHTML=demo1.innerHTML
  function Marquee(){
   if(demo.scrollTop>=demo1.offsetHeight){
    demo.scrollTop=0;
   }
   else{
    demo.scrollTop=demo.scrollTop+1;
   }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function(){clearInterval(MyMar)}
  demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
 //向下滚动
 // demo2.innerHTML=demo1.innerHTML
 // demo.scrollTop=demo.scrollHeight
 // function Marquee2(){
 //  if(demo1.offsetTop-demo.scrollTop>=0)
 //   demo.scrollTop+=demo2.offsetHeight
 //  else{
 //   demo.scrollTop--
 //  }
 // }
 // var MyMar2=setInterval(Marquee2,speed)
 // demo.onmouseover=function() {clearInterval(MyMar2)}
 // demo.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
js图片查看器插件用法示例
Jun 22 #Javascript
JS实现继承的几种常用方式示例
Jun 22 #Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 #Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 #Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 #Javascript
简单了解JavaScript中常见的反模式
Jun 21 #Javascript
通过图带你深入了解vue的响应式原理
Jun 21 #Javascript
You might like
德生H-501的评价与改造
2021/03/02 无线电
使用 php4 加速 web 传输
2006/10/09 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
个人租房协议书
2014/04/09 职场文书
大雁塔英文导游词
2015/02/10 职场文书
关于迟到的检讨书
2015/05/06 职场文书
python - asyncio异步编程
2021/04/06 Python
Go Plugins插件的实现方式
2021/08/07 Golang
用Python生成会跳舞的美女
2022/01/18 Python
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android