2013-03-15 79 views
0

我有一個雲的圖像設置爲佔用屏幕的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> 

使用像這樣讓我把它擴展到瀏覽器的大小。

有人可以幫我弄清楚如何不斷地平移這個圖像嗎?

非常感謝你的時間!

  • 詹姆斯

回答

0

我認爲你會從搜索使用長期的解決方案「paralax水平滾動的利益。

你應該能夠找到的教程,如

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

哪些可以調整到響應。

+0

感謝您的回覆!我很欣賞這種幫助,但我並不是在尋找視差效應(可能在未來的某個時候)。我只是想找到一種方法讓我的雲在屏幕上從右向左持續平移(或向左正確)。我也不希望鼠標像使用視差滾動一樣控制鼠標。我只想讓雲在屏幕上始終水平循環。 – 2013-03-16 01:06:50

0

我有這個完全相同的問題。我沒有使用雲,但它可以很容易地實現,只有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/