jquery 带重复文本的滚动选取框

fivyi3re 于 2022-12-26 发布在 jQuery

关注(0)|答案(3)|浏览(137)

我想有一个滚动字幕，永远不会结束，与此，我的意思是，永远不会有一个空白的字幕。
因此，例如，当所有文本都已显示在屏幕（视区）中并且最新的单词正在选框时，选框将重复而不首先结束选框（意思是：所有文本已移到左侧[字幕：right-〉left]）。重复的意思是文本将从字幕所在的位置后面重新开始
所以当我看到字幕文字"你好，地球上的人们·"，就在这里：

_=空白
!=字幕第一次运行的字符
^=字幕第二轮的字符
&=字幕第三行的字符

________!!!!!!!!!!!!!!!!!!!!!!!!!!!!****************************^^^^^^^^^^^^^^^^^^^^^^^^^^^^&&&&&&&&
当然我需要它是平滑的。类似this的答案，但是没有空格。库的使用并不重要。
有人能帮帮我吗？

jquery

来源：https://stackoverflow.com/questions/51269835/scrolling-marquee-w-repeating-text

3条答案

按热度按时间

hiz5n14c1#

你可以使用marque插件来实现这个

$('.marquee').marquee({
    //speed in milliseconds of the marquee
    duration: 5000,
    //gap in pixels between the tickers
    gap: 0,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 0,
    //'left' or 'right'
    direction: 'left',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: false
});

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js'></script>
  
<body>
  <div class="marquee">stuff to say 1|</div>
    <div class="marquee">stuff to say 2|</div>
    <div class="marquee">stuff to say 3|</div>
    <div class="marquee">stuff to say 4|</div>
  <div class="marquee">stuff to say 5</div>
</body>

赞(0）回复(0）举报 2022-12-26

zzwlnbp82#

我想这就是你想要的：）））

function start() {
    new mq('latest-news');
    mqRotate(mqr);
}
window.onload = start;

function objWidth(obj) {
    if (obj.offsetWidth) return obj.offsetWidth;
    if (obj.clip) return obj.clip.width;
    return 0;
}
var mqr = [];
function mq(id) {
    this.mqo = document.getElementById(id);
    var wid = objWidth(this.mqo.getElementsByTagName("span")[0]) + 5;
    var fulwid = objWidth(this.mqo);
    var txt = this.mqo.getElementsByTagName("span")[0].innerHTML;
    this.mqo.innerHTML = "";
    var heit = this.mqo.style.height;
    this.mqo.onmouseout = function () {
        mqRotate(mqr);
    };
    this.mqo.onmouseover = function () {
        clearTimeout(mqr[0].TO);
    };
    this.mqo.ary = [];
    var maxw = Math.ceil(fulwid / wid) + 1;
    for (var i = 0; i < maxw; i++) {
        this.mqo.ary[i] = document.createElement("div");
        this.mqo.ary[i].innerHTML = txt;
        this.mqo.ary[i].style.position = "absolute";
        this.mqo.ary[i].style.left = wid * i + "px";
        this.mqo.ary[i].style.width = wid + "px";
        this.mqo.ary[i].style.height = heit;
        this.mqo.appendChild(this.mqo.ary[i]);
    }
    mqr.push(this.mqo);
}
function mqRotate(mqr) {
    if (!mqr) return;
    for (var j = mqr.length - 1; j > -1; j--) {
        maxa = mqr[j].ary.length;
        for (var i = 0; i < maxa; i++) {
            var x = mqr[j].ary[i].style;
            x.left = parseInt(x.left, 10) - 1 + "px";
        }
        var y = mqr[j].ary[0].style;
        if (parseInt(y.left, 10) + parseInt(y.width, 10) < 0) {
            var z = mqr[j].ary.shift();
            z.style.left = parseInt(z.style.left) + parseInt(z.style.width) * maxa + "px";
            mqr[j].ary.push(z);
        }
    }
    mqr[0].TO = setTimeout("mqRotate(mqr)", 20);
}

.marquee {
      position: relative;
      overflow: hidden;
      text-align: center;
      margin: 0 auto;
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    #latest-news {
      line-height: 32px;
      a {
        color: #555555;
        font-size: 13px;
        font-weight: 300;
        &:hover {
          color: #000000;
        }
      }
      span {
        font-size: 18px;
        position: relative;
        top: 4px;
        color: #999999;
      }
    }

<div id="latest-news" class="marquee">
   <span style="white-space:nowrap;">
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">one Lorem ipsum dolor sit amet</a>
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">two In publishing and graphic design</a>
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">three Lorem ipsum is a placeholder text commonly</a>
   </span>
</div>

赞(0）回复(0）举报 2022-12-26

u59ebvdq3#

谢谢陛下......我明白了......我需要的......

function start() {
    new mq('latest-news');
    mqRotate(mqr);
}
window.onload = start;

function objWidth(obj) {
    if (obj.offsetWidth) return obj.offsetWidth;
    if (obj.clip) return obj.clip.width;
    return 0;
}
var mqr = [];
function mq(id) {
    this.mqo = document.getElementById(id);
    var wid = objWidth(this.mqo.getElementsByTagName("span")[0]) + 5;
    var fulwid = objWidth(this.mqo);
    var txt = this.mqo.getElementsByTagName("span")[0].innerHTML;
    this.mqo.innerHTML = "";
    var heit = this.mqo.style.height;
    this.mqo.onmouseout = function () {
        mqRotate(mqr);
    };
    this.mqo.onmouseover = function () {
        clearTimeout(mqr[0].TO);
    };
    this.mqo.ary = [];
    var maxw = Math.ceil(fulwid / wid) + 1;
    for (var i = 0; i < maxw; i++) {
        this.mqo.ary[i] = document.createElement("div");
        this.mqo.ary[i].innerHTML = txt;
        this.mqo.ary[i].style.position = "absolute";
        this.mqo.ary[i].style.left = wid * i + "px";
        this.mqo.ary[i].style.width = wid + "px";
        this.mqo.ary[i].style.height = heit;
        this.mqo.appendChild(this.mqo.ary[i]);
    }
    mqr.push(this.mqo);
}
function mqRotate(mqr) {
    if (!mqr) return;
    for (var j = mqr.length - 1; j > -1; j--) {
        maxa = mqr[j].ary.length;
        for (var i = 0; i < maxa; i++) {
            var x = mqr[j].ary[i].style;
            x.left = parseInt(x.left, 10) - 1 + "px";
        }
        var y = mqr[j].ary[0].style;
        if (parseInt(y.left, 10) + parseInt(y.width, 10) < 0) {
            var z = mqr[j].ary.shift();
            z.style.left = parseInt(z.style.left) + parseInt(z.style.width) * maxa + "px";
            mqr[j].ary.push(z);
        }
    }
    mqr[0].TO = setTimeout("mqRotate(mqr)", 20);
}

.marquee {
      position: relative;
      overflow: hidden;
      text-align: center;
      margin: 0 auto;
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    #latest-news {
      line-height: 32px;
      a {
        color: #555555;
        font-size: 13px;
        font-weight: 300;
        &:hover {
          color: #000000;
        }
      }
      span {
        font-size: 18px;
        position: relative;
        top: 4px;
        color: #999999;
      }
    }

<div id="latest-news" class="marquee">
   <span style="white-space:nowrap;">
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">one Lorem ipsum dolor sit amet</a>
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">two In publishing and graphic design</a>
      <span>&nbsp;&nbsp;&bull;</span>
      <a href="/">three Lorem ipsum is a placeholder text commonly</a>
   </span>
</div>

赞(0）回复(0）举报 2022-12-26

我来回答

jquery 带重复文本的滚动选取框

3条答案

相关问题

热门标签

最新问答