jquery - jquery水平平移云

Question

我有一张云的图像，它被设置为占据屏幕 100% 的宽度。我希望能够平移它，类似于“Spritely”插件可以连续平移云的方式，但是，我没有使用 Spritely，因为这不是“背景图像”。我希望这是有道理的。

我的图像代码：

   <div id="clouds" style="position:absolute; z-index:99; width:100%; top:56.5%;">
   <div id="clouds1" style="width:auto;overflow:hidden; position:relative; z-index:99; left:0%;">
   <img src="Images/clouds.png" style="width:100%" />
   </div>
   </div>

以这种方式使用图像允许我将其扩展到浏览器大小。

有人可以帮我弄清楚如何连续平移此图像吗？

非常感谢您的参与！

• 詹姆士

Answer 1

我认为您将从使用“视差水平滚动”一词搜索解决方案中受益。

您应该能够找到教程，例如

http://www.egstudio.biz/easy-parallax-with-jquery/

可以对其进行调整以响应。

Answer 2

我有这个完全相同的问题。我没用云，但是很容易实现，只需要4行代码。

HTML

<div class="slideshow">  
        <ul>
            <li><img src="img1.jpg" alt="jQuery" width="350" height="200" /></li>
            <li><img src="img2.jpg" alt="Infinite Slideshow" width="350" height="200" /></li>
            <li><img src="img3.jpg" alt="only 4 lines of code" width="350" height="200" /></li>
            <li><img src="img4.jpg" alt="www.creativejuiz.fr" width="350" height="200" /></li>
        </ul>  
    </div>

CSS

/* slideshow styles */
.slideshow {  
   width: 350px;  
   height: 200px;  
   margin: 3em auto;
   overflow: hidden;
   border: 3px solid #f2f2f2;
}  
.slideshow ul {  
   width: 400%;  
   height: 200px;
   padding:0; margin:0;
   list-style:none;
}  
.slideshow li { float: left; }

jQuery

$(function(){
   setInterval(function(){
      $(".slideshow ul").animate({marginLeft:-350},800,function(){
         $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
      })
   }, 3500);
});

来源 - http://creativejuiz.fr/blog/doc/infinite-slideshow/