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 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 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
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
php模拟post提交数据的方法
2015/02/12 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
validator验证控件使用代码
2010/11/23 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
详细解读Python中的__init__()方法
2015/05/02 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python和shell获取文本内容的方法
2018/06/05 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
护士节演讲稿开场白
2014/08/25 职场文书
会计工作岗位职责
2015/02/03 职场文书
单位接收证明格式
2015/06/18 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python