10行原生JS实现文字无缝滚动(超简单)


Posted in Javascript onJanuary 02, 2018

废话不多说,直接上代码

<section class="pro_quota_tip"> 
 <div class="tip_box"> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >aaaaaaaaa</a> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >bbbbbbbbbbbbbb</a> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >ccccccccccc</a> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >ddddddddddddddd</a> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >aaaaaaaaaaaaaa</a> 
 </div> 
</section>
body,#app{
  margin: 0;
  padding: 0;
  font-family:Helvetica;
  background: #f0efef !important;
  width: 100%;
  overflow-x: hidden;
}
a{
 text-decoration: none;
}
.pro_quota_tip{
  background: #fff;
  font-size: 14px;
  overflow: hidden;
  width: 200px;
  height: 49px;
  margin:0 auto;
  margin-top:10%
}
.pro_quota_tip .tip_box{
  position: relative;
}
.pro_quota_tip .tip_box a{
  color: red;
  display: block;
  width: 100%;
  padding:15px 5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
var tip_box_a_h = document.querySelectorAll('.tip_box a')[0].offsetHeight;
var i=0;
setInterval(()=>{
 let startScroll = setInterval(()=>{
  i++;
  document.querySelector('.tip_box').style.bottom = (tip_box_a_h/10)*i+'px';
  if(i%10==0)clearInterval(startScroll);
 },50)
 if(i>(10*(document.querySelectorAll('.tip_box a').length-2)))i = 0;
},2500)

绝对的10行,简单实用,无依赖

以上这篇10行原生JS实现文字无缝滚动(超简单)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
node.js中watch机制详解
Nov 17 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
javascript 中的继承实例详解
May 05 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 #Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 #Javascript
基于wordpress的ajax写法详解
Jan 02 #Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 #Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 #Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 #Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 #Javascript
You might like
请离开include_once和require_once
2013/07/18 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
详解python3百度指数抓取实例
2016/12/12 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
详解Python 切片语法
2019/06/10 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
会计学专业学生的求职信范文
2014/01/27 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
体育个人工作总结
2015/02/09 职场文书
十月围城观后感
2015/06/08 职场文书
圣诞晚会主持词
2015/07/01 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
教师节简报
2015/07/20 职场文书
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python