logo标签列表

如何使用jQuery制作无限循环动画？

javascriptjqueryhtmlcssmarquee
3

我一直在尝试使用jQuery动画来实现一个跑步文本。但是我似乎无法让它在一个无限循环中运行。它总是只运行一次。。

/*  js:  */

$(document).ready(function(){
  function scroll() {
    $('.scroll').animate({ 
      right: $(document).width() 
    }, 8000, scroll); 
  }
  scroll();
});
/* css： */

.scroll {
  position: absolute;
  right: -200px;
  width: 200px;
}
<!-- html: -->

<div class="scroll">This text be scrollin'!</div>

这是演示文稿：https://jsfiddle.net/y9hvr9fa/1/。
你们知道如何修复它吗？
我想尝试使用jQuery动画来制作跑马灯。 - Coolguy
5个回答
4
这是我所做的事情：

  1. 预先计算 $(document).width()，以便在下一次迭代中出现水平滚动条时，宽度会发生变化。

  2. 移除你为 scroll 设置的 width，这样宽度只有内容那么长 - 你需要使用 white-space:nowrap 使文本保持在同一行。

  3. 在 animate 中使用 $('.scroll').outerWidth() 获取 scroll 文本的宽度。

查看下面的演示和更新代码片段。 

$(document).ready(function() {
  
  // initialize
  var $width = $(document).width();
  var $scrollWidth = $('.scroll').outerWidth();
  $('.scroll').css({'right': -$scrollWidth + 'px'});
  
  // animate
  function scroll() {
    $('.scroll').animate({
      right: $width
    }, 8000, 'linear', function() {
      $('.scroll').css({'right': -$scrollWidth + 'px'});
      scroll();
    });
  }
  scroll();
});
body {
  overflow: hidden;
}
.scroll {
  position: absolute;
  white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll">This text be scrollin'!</div>

请告诉我您对此的反馈，谢谢！

不错，你还可以添加线性过渡类型（我会说......}，8000，'linear'，function（）{...}），这样它就更像那些<marquee>文本的特点。 - stewo
@lynx 感谢您指出这个问题 - 现在看起来好多了... :) - kukkuz
@给踩票者，请来到光明之处并在此评论问题-如果有任何问题，我已经准备好解决它。 - kukkuz
2

希望它有用 :)

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>

2

CSS替代方案：

你也可以使用类似于这个CodePen中的CSS过渡效果： https://codepen.io/jamesbarnett/pen/kfmKa

更高级一些：

$(document).ready(function(){
    var scroller = $('#scroller'); // scroller $(Element)
    var scrollerWidth = scroller.width(); // get its width
    var scrollerXPos = window.innerWidth; // init position from window width
    var speed = 1.5;
    scroller.css('left', scrollerXPos); // set initial position
    
    function moveLeft() {
     if(scrollerXPos <= 0 - scrollerWidth) scrollerXPos = window.innerWidth;
     scrollerXPos -= speed;
      scroller.css('left', scrollerXPos);
      window.requestAnimationFrame(moveLeft);
    }
  window.requestAnimationFrame(moveLeft);
});
.scroll {
  display: block;
  position: absolute;
  overflow: visible;
  white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroller" class="scroll">This text be scrollin'!</div>

简单解决方案（我的原始回答）：

在这个例子中，这将是一个快速修复：

文本一直向左移动而没有停止。在这里，您将告诉文本始终从该位置开始。（时间已经用完后 - 意味着不仅仅是当它离开屏幕时）

$(document).ready(function(){
    function scroll() {
      $('.scroll').css('right', '-200px').animate({ 
         right: $(document).width() 
      }, 8000, scroll); 
    }
    scroll();
});
它似乎在左边消失了几秒钟，然后又出现在右边...如何让它在左边消失并立即在右边出现？ - Coolguy
是的，没错，这就是我称之为“快速修复”的原因。你所构建的函数只是让文本向左运行8秒钟然后停止。你需要考虑如何使其重新运行该路径-请看我的编辑。我使用requestAnimationFrame（查找一下）来执行动画，并控制确切位置。然后你可以检查文本的位置并重新定位它。 - stewo
1

我一直在尝试使用jquery animate来实现滚动文字。

您知道<marquee> HTML元素的作用，对吧？

这意味着您不需要CSS、Javascript或jQuery。

纯HTML解决方案：

<marquee>This text be scrollin'!</marquee>

<marquee>元素包含大量可选的声明性属性，用于控制滚动文本的行为：

  • behavior
  • bgcolor
  • direction
  • height
  • hspace
  • loop
  • scrollamount
  • scrolldelay
  • truespeed
  • vspace
  • width

进一步阅读：

注意1：

上述资源正确指出：

该特性不再推荐使用。虽然某些浏览器可能仍然支持它，但它可能已经从相关Web标准中删除，正在被删除的过程中，或者只是为了兼容性而保留。

注意2：

同一个资源还建议：

查看此页面底部的兼容性表格以指导您的决策。

而且...浏览一下兼容性表格，就会发现<marquee>元素与今天存在的最稳定、最兼容的元素一样兼容。

0

这个怎么样？

.scroll {
 height: 50px;  
 overflow: hidden;
 position: relative;
}
.scroll p{
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 -moz-animation: scroll 8s linear infinite;
 -webkit-animation: scroll 8s linear infinite;
 animation: scroll 8s linear infinite;
}
@-moz-keyframes scroll {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll {
 0%   { 
 -moz-transform: translateX(100%); 
 -webkit-transform: translateX(100%); 
 transform: translateX(100%);     
 }
 100% { 
 -moz-transform: translateX(-100%); 
 -webkit-transform: translateX(-100%); 
 transform: translateX(-100%); 
 }
}
<div class="scroll"><p>This text be scrollin'!</p></div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接