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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
JS排序之快速排序详解
Apr 08 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
vue 权限认证token的实现方法
Jul 17 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
python3 对list中每个元素进行处理的方法
2018/06/29 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
详解python logging日志传输
2020/07/01 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
销售人员自我评价
2014/02/01 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
2014年维修工作总结
2014/11/22 职场文书
采购员岗位职责范本
2015/04/07 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
uniapp开发小程序的经验总结
2021/04/08 Javascript
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
Python合并多张图片成PDF
2021/06/09 Python