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

我认为使用术语'paralax水平滚动'来搜索解决方案会让您受益。

您应该能够找到诸如

之类的教程

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/

jquery水平平移云

2 个答案: