jquery水平平移云答案

【问题标题】：jquery horizontal panning cloudsjquery水平平移云
【发布时间】：2013-03-15 23:22:36
【问题描述】：

我有一张云的图像，它设置为占据屏幕 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>

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

谁能帮我弄清楚如何连续平移这张图片？

非常感谢您的宝贵时间！

詹姆斯

【问题讨论】：

标签： jquery image jquery-animate pan

【解决方案1】：

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

你应该可以找到诸如

之类的教程

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

可以调整为响应式。

【讨论】：

感谢您的回复！我感谢您的帮助，但我不是在寻找视差效果，（可能在未来的某个时候。）我只是想找到一种方法让我的云在屏幕上从右到左连续平移（或从左到对。）我也不希望它像视差滚动一样由鼠标控制。我只是希望云总是在屏幕上水平循环。

【解决方案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/

【讨论】：