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 相关文章推荐
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
Vue中key的作用示例代码详解
Jun 10 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
PHP中文分词的简单实现代码分享
2011/07/17 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
PHP实现简易图形计算器
2020/08/28 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python的re模块正则表达式操作
2016/05/25 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
python设置值及NaN值处理方法
2018/07/03 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
python pillow模块使用方法详解
2019/08/30 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python 爬虫的原理
2020/07/30 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
总经理任命书
2014/03/29 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
病危通知单
2015/04/17 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
小学生读书笔记范文
2015/06/30 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
2019消防宣传标语!
2019/07/10 职场文书