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>
使用像这样让我把它扩展到浏览器的大小。
有人可以帮我弄清楚如何不断地平移这个图像吗?
非常感谢你的时间!
- 詹姆斯
答
我认为你会从搜索使用长期的解决方案“paralax水平滚动的利益。
你应该能够找到的教程,如
http://www.egstudio.biz/easy-parallax-with-jquery/
哪些可以调整到响应。
答
我有这个完全相同的问题。我没有使用云,但它可以很容易地实现,只有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);
});
感谢您的回复!我很欣赏这种帮助,但我并不是在寻找视差效应(可能在未来的某个时候)。我只是想找到一种方法让我的云在屏幕上从右向左持续平移(或向左正确)。我也不希望鼠标像使用视差滚动一样控制鼠标。我只想让云在屏幕上始终水平循环。 – 2013-03-16 01:06:50