动画背景图像
Posted
技术标签:
【中文标题】动画背景图像【英文标题】:Animating Background Image 【发布时间】:2010-10-23 07:54:09 【问题描述】:我喜欢使用 Jquery 及其配套的 Jquery Ui,但无法找到在特定时间段(如 5 秒)内为背景图像设置动画的方法。 我不能这样做:
$('sampleelement').animate('background-image':'url(hello.jpg)',5000);
有什么想法吗??
【问题讨论】:
您到底想达到什么目的?我以为你试图让背景图像出现? 【参考方案1】:这是不可能的。 Css 不允许像这样对背景图像进行操作。您应该在内容后面放入一个带有背景的 div,然后将其淡入:
<div id='background_img' style='display:none; position:absolute;'><!-- position me behind the content!--><img ... /></div>
<div id='content'>YDADA</div>
$('#background_img').fadeIn(5000);
【讨论】:
【参考方案2】:使用 jQuery Background-Position Animations 插件。请参阅demo。
【讨论】:
【参考方案3】:为什么不使用动画 GIF?
【讨论】:
没有制作gif的经验【参考方案4】:Pim Jager 的方法是最接近没有动画 gif 的方法。
【讨论】:
【参考方案5】:您可以创建多个图像,然后使用 setTimeout 将一个替换为另一个。这有点像模拟 .gif,只是提供了更多的灵活性和质量。
【讨论】:
【参考方案6】:我在Cheer Us Up 上所做的是使用基本的javascript 来改变背景图片——
$(function()
curr = 0;
setTimout(changeBg(),200);
);
function changeBg()
curr++;
document.body.style.backgroundPosition = curr + 20;
这是基本思想。我没有使用 jquery,因为我只是想让它慢慢滑过。
【讨论】:
【参考方案7】:这就是你需要的:http://www.ovalpixels.com/bgImageTransition/
【讨论】:
以上是关于动画背景图像的主要内容,如果未能解决你的问题,请参考以下文章