10行原生JS实现文字无缝滚动

向右看齐 2022-06-09 13:11 231阅读 0赞

## 废话不多说，直接上代码 ##

<section class="pro_quota_tip">
      <div class="tip_box">
        <a href="javascript:;">aaaaaaaaa</a>
        <a href="javascript:;" >bbbbbbbbbbbbbb</a>
        <a href="javascript:;">ccccccccccc</a>
        <a href="javascript:;">ddddddddddddddd</a>
        <a href="javascript:;">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行，简单实用，无依赖

发表评论取消回复

表情：

评论列表（有 0 条评论，231人围观）

还没有评论，来说两句吧...

相关阅读

相关原生JS实现无缝轮播

今天分享前端开发学习中的一个很经典的案例——原生JS实现无缝轮播图。需求： 1.鼠标移入轮播图时左右两边显示上一页下一页按钮，移出时隐藏 2.鼠标点击箭头，图片发生轮播

客官°小女子只卖身不卖艺/ 2023年06月24日 05:24/ 0 赞/ 41 阅读

相关 js使用transition效果实现无缝滚动

转自：[http://www.pinlue.com/article/2020/09/0916/5311219316405.html][http_www.pinlue.com_a

快来打我*/ 2022年12月10日 05:58/ 0 赞/ 242 阅读

相关 css3 文字横向无缝滚动

<div class="notice-container"> <div class="header-notice-marquee" id="notice-

悠悠/ 2022年10月25日 01:24/ 0 赞/ 371 阅读

相关 10行原生JS实现文字无缝滚动

废话不多说，直接上代码 <section class="pro_quota_tip"> <div class="tip_box"> <

向右看齐/ 2022年06月09日 13:11/ 0 赞/ 232 阅读

相关定时器实现文字的无缝滚动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <styl

缺乏、安全感/ 2022年06月02日 02:36/ 0 赞/ 260 阅读

相关原生 js 实现无缝滚动轮播

上一次我们看了如何实现简单的轮播图，以及各种常用的效果实现；这一次，我们看看无缝滚动轮播图的实现（利用左边的margin 来实现）；原理：我们创建一个div，下图共

Love The Way You Lie/ 2022年05月28日 11:00/ 0 赞/ 342 阅读

相关 js实现无缝向上滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

矫情吗；*/ 2022年05月13日 08:36/ 0 赞/ 276 阅读

相关 js图片无缝滚动

> 虽然是一个简单的案例，但思想确实很巧妙，且一通百通！主要原理：利用利用动态创建一个与当前相同的图片条，利用scrollLeft（滚动条的左水平偏移来实现滚动用利用视觉

爱被打了一巴掌/ 2022年03月25日 08:57/ 0 赞/ 418 阅读

相关原生JS简单实现图片无缝滚动

图片无缝滚动的轮播主要利用滚动轴–x来实现，首先是HTML部分的实现 <div id="d1"> <div id="d2">

偏执的太偏执、/ 2021年10月24日 00:58/ 0 赞/ 406 阅读

相关 js实现图片无缝滚动

js实现图片无缝滚动实现原理：图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插...

红太狼/ 2020年06月03日 13:47/ 0 赞/ 793 阅读