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水平平移雲

回答

相關問題