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 相关文章推荐
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
js有关元素内容操作小结
Dec 20 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
layui分页效果实现代码
May 19 Javascript
JavaScript 巧学巧用
May 23 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
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
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
webpack多页面开发实践
2017/12/18 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Python 中Operator模块的使用
2021/01/30 Python
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
计算机专业毕业生的自我评价
2013/11/18 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
关于运动会的广播稿
2014/09/22 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
工作简报怎么写
2015/07/21 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android