使用 jquery 平滑滚动图像

Posted 2023-05-08

【中文标题】使用 jquery 平滑滚动图像

【英文标题】：smooth scrolling images with jquery

【发布时间】：2012-08-25 17:46:53

【问题描述】：

我正在使用 jQuery 制作徽标滑块。我的第一个想法是使用由所有徽标组成的大型单个图像作为背景并为其位置设置动画。这背后的想法是通过仅加载单个文件来减少 http 请求。

jQuery 代码是这样的：

<script>
  $(function()
    var current = 0;
    function bgscroll()
      // 20 pixel row at a time
      current -= 20;
      // move the background with backgrond-position css properties
      $('#slider').animate('background-position' : current+'px', 100, 'linear');
      setInterval(bgscroll, 1);
    );
</script>

但是动画有问题。它闪烁并且不平滑。 所以有人知道如何让这个动画更流畅吗？

当前的 CSS

#slider
  height: 97px;
  overflow: hidden;
  background-image: url("../img/logos-long.jpg");
  background-repeat: repeat-x;
  width: 100%;

【问题讨论】：

添加了 CSS。动画没有结束。

【参考方案1】：

在您的示例中，interval 在一个 animation 循环结束之前被触发多次，所以...

jsBin demo

不需要setInterval 当我们可以使用您的函数和动画回调创建循环时！

$(function()
  function bgscroll()
    $('#slider').stop().animate('background-position':'-=1000',10000,'linear',bgscroll);
  
  bgscroll(); // initiate!!
);

使用.stop() 清除动画队列将使它（不完美但）好很多。

【参考方案2】：

您的超时执行速度似乎比每个动画周期完成的速度要快。如果您将超时延迟增加到 100 毫秒，我认为闪烁会停止。