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实现的一个include函数
Jul 21 Javascript
文本链接逐个出现的js脚本
Dec 12 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
json数据的列循环示例
Sep 06 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
JavaScript之数组扁平化详解
Jun 03 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微信支付实例解析
2016/07/22 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
简单的js表单验证函数
2013/10/28 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python中的reduce内建函数使用方法指南
2014/08/31 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
python 默认参数问题的陷阱
2016/02/29 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
工商治理实习生的自我评价分享
2014/02/20 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
python实现自定义日志的具体方法
2021/05/28 Python