编程 Javascript

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程序设计有所帮助。

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

- Author -

etemal_bright

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 点击整页变灰的效果（可做退出效果）。

Jan 09 Javascript

IE6下CSS图片缓存问题解决方法

Dec 09 Javascript

ExtJs设置GridPanel表格文本垂直居中示例

Jul 15 Javascript

使用AngularJS实现可伸缩的页面切换的方法

Jun 19 Javascript

使用JavaScript实现旋转的彩圈特效

Jun 23 Javascript

jQuery的Ajax用户认证和注册技术实例教程(附demo源码)

Dec 08 Javascript

Angularjs过滤器使用详解

May 25 Javascript

jQuery右下角悬浮广告实例

Oct 17 Javascript

使用Math.max,Math.min获取数组中的最值实例

Apr 25 Javascript

JavaScript对象_动力节点Java学院整理

Jun 23 Javascript

Vue 创建组件的两种方法小结(必看)

Feb 23 Javascript

vue将data恢复到初始状态 && 重新渲染组件实例

Sep 04 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