如何在jQuery中无限水平滚动图像？

Posted 2023-03-05

【中文标题】如何在jQuery中无限水平滚动图像？

【英文标题】：How to infinite horizontal scroll an image in jQuery?

【发布时间】：2017-02-09 22:36:27

【问题描述】：

我正在尝试将 2 个图像 1 叠加在另一个之上，并使用 jQuery 使它们无限滚动。我可以让图像在 CSS 中滚动和分层，但动画变得非常生涩。如何使用 jQuery 在图像上创建无限水平滚动并保持动画流畅？

到目前为止我的代码：

CSS：

@keyframes animatedBackground 
    from  background-position: 0 0; 
    to  background-position: 100% 0; 


#animate-area    
    width: 100vw; 
    height: 100vw; 
    background-image: url(http://oi64.tinypic.com/2r7ri29.jpg);
    background-position: 0px 0px;
    background-repeat: repeat-x;

    animation: animatedBackground 135s linear infinite;


#animate-area2   
    width: 100vw; 
    height: 100vw; 
    background-image: url(http://oi67.tinypic.com/2niy905.jpg);

    background-repeat: repeat-x;
  position: relative;
    animation: animatedBackground 80s linear infinite;

和 html：

<div id="animate-area"></div>
<div id="animate-area2"></div>

JSFiddle

【参考方案1】：

检查一下。也许你会喜欢它。

https://jsfiddle.net/hnxnjzaq/3/

基本上只是使用 translate 而不是 background-position。

@keyframes animatedBackground 
 from  transform: translateX(0); 
 to  transform: translateX(100%); 

随心所欲地调整速度。

【参考方案2】：

改变你的

@keyframes animatedBackground 
   from  background-position: 0 0; 
   to  background-position: 100% 0; 

到：

@keyframes animatedBackground 
   from  background-position: -100% 0; 
   to  background-position: 100% 0; 

sn-p：

body 
  background-color: black;


@keyframes animatedBackground 
  from  background-position: -100% 0; 
  to  background-position: 100% 0; 


#animate-area	
  width: 100vw;
  height: 100vw;
  background-image: url(http://oi64.tinypic.com/2r7ri29.jpg);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  position:absolute;z-index:-2;

  animation: animatedBackground 135s linear infinite;


#animate-area2	
  width: 100vw;
  height: 100vw;
  background-image: url(http://oi67.tinypic.com/2niy905.jpg);
  position:absolute;z-index:-1;

  background-repeat: repeat-x;
  position: relative;
  animation: animatedBackground 80s linear infinite;

<div id="animate-area"></div>
<div id="animate-area2"></div>

【讨论】：

这不是问题，gaetanoM。问题在于使用%。这个% 不是指背景大小，而是指元素大小。所以它只有在元素与背景具有相同宽度时才会起作用。这是一个很难解决的问题。在一定的 w/h 比例范围内，background-size:cover 工作，如果你知道如何削减你的背景。

@AndreiGheorghiu 非常感谢您提供的信息。非常珍贵。再次感谢