动画背景图片

我想让背景图片在0％和100％之间前后移动，没有运气。动画背景图片

#swipe { 
    position:absolute; 
    background-image:url(images/title-back-grade.png); 
    background-position:50% 0%; 
    height: 250px; 
    width: 100%; 
    top: 108px; 
    left: 0px; 
    z-index: 2; 
} 

<div id="swipe"></div> 

$(document).ready(function() { 
$('#swipe').css({backgroundPosition:"(50% 0)"}); 
$('#swipe').animate(
     {backgroundPosition:"(-1% 0)"}, 
     {duration:500}); 

});

有人能帮助我吗？

来源

2011-08-14 Stephen Brown

尝试使用实际的像素值。我认为不支持百分比动画值。虽然我可能是错的 – rossipedia

当你说百分比，它成为什么百分比ambigous？更好的方法是计算像素值（如果您不想使用硬编码值）并使用这些值。

看看这个tuturial（如果哟有没有的话）的使用像素值的动画背景的一些很好的例子：http://snook.ca/archives/javascript/jquery-bg-image-animations

来源

2011-08-14 18:44:09 Mrchief

像素值会成为一个问题，因为0％和100％很适合浏览器窗口，无论它的大小如何。我不确定我是否可以计算像素的百分比，至少不是我的知识。 –

好吧，如果你的意思是百分之百的可视部分，那么它的'$（window）.width（）'会给你100％的“可见”宽度。要获得50％，请将该值乘以0.5。 '0％ - > 0px' :) – Mrchief

这可以让你开始

http://jsfiddle.net/efortis/nTWFt/

function animateBg() { 
    var bg = $('#swipe'); 
    bg.animate({left: '-=5000px' }, 10000, 
    function() { 
    bg.animate({left: '+=5000px' }, 10000, 
     function() {     
     animateBg(); 
     }); 
    }); 
} 

$(document).ready(function() { 
    animateBg(); 
});

来源

2011-08-14 19:06:23

不理想，但它的工作原理... $（文件）。就绪（函数（）{ \t $ POS = 50; \t $ DIR = 1; \t window.setInterval（运动，10）; }）; 函数移动（）{ \t \t $（'＃swipe'）。css（{backgroundPosition：$ pos +“％0px”}）; \t \t 如果（$ POS == 100） \t { \t \t $ DIR = -1; \t} \t如果（$ POS == 0） \t { \t \t $ DIR = 1; \t} \t $ pos = $ pos + $ dir; }只是没有在IE –

作品，如果你让让IE浏览器运行脚本 –

@Stephen布朗是的另一个解决方案，为什么不张贴它作为答案？你可以发布你的答案，并将其设置为ww。 –

动画背景图片

回答

相关问题