jquery水平平移云

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

我的形象代码：

<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>

使用像这样让我把它扩展到浏览器的大小。

有人可以帮我弄清楚如何不断地平移这个图像吗？

非常感谢你的时间！

詹姆斯

来源

2013-03-15 James Barracca

我认为你会从搜索使用长期的解决方案“paralax水平滚动的利益。

你应该能够找到的教程，如

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

哪些可以调整到响应。

来源

2013-03-15 23:44:56 rath3r

感谢您的回复！我很欣赏这种帮助，但我并不是在寻找视差效应（可能在未来的某个时候）。我只是想找到一种方法让我的云在屏幕上从右向左持续平移（或向左正确）。我也不希望鼠标像使用视差滚动一样控制鼠标。我只想让云在屏幕上始终水平循环。 – 2013-03-16 01:06:50

我有这个完全相同的问题。我没有使用云，但它可以很容易地实现，只有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/

来源

2013-04-12 02:59:03

jquery水平平移云

回答

相关问题