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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
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
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
PHP最常用的正则表达式
2017/02/13 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
php中如何执行linux命令详解
2018/11/06 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
node.js基础知识小结
2018/02/26 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python使用thrift教程的方法示例
2019/03/21 Python
Django时区详解
2019/07/24 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
管理专员自荐信
2014/01/26 职场文书
医学类个人求职信范文
2014/02/05 职场文书
员工聘用合同范本
2015/09/21 职场文书
Python django中如何使用restful框架
2021/06/23 Python
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS