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 模式设计之工厂模式详细说明
May 10 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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 fckeditor 调用的函数
2009/06/21 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python中__name__的使用实例
2015/04/14 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
Python面向对象之继承代码详解
2018/01/29 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
中小学校园安全广播稿
2014/09/29 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
Python requests用法和django后台处理详解
2022/03/19 Python