Question

我想简单地在div中移动背景图像（小于图像），使图像漂移到div的可见区域（图像高705，div高215px）。

我从其他帖子中得到了这个，但它似乎不起作用：（

有什么想法吗？ - 没有错误，但没有任何问题

HTML中的

我有

<div id="banner"></div>

和css;

#banner {
    background-image: url(/media/residential-services-705.jpg);
    background-repeat: no-repeat;
    height: 215px;
    width: 940px;
    background-position: left 0px;
    margin: 0px;
    padding: 0px;
}

和javascript

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

function bouncebanner(){
    $('#banner').stop().animate(
        {backgroundPosition:"(0 -490px)"}, 
        {duration:5000}
    );
}

Answer 1

backgroundPosition: '0 -490'

请勿使用可能导致问题的px和括号

Answer 2

如果您想要仅为其中一个轴（X或Y）设置动画，则应按如下方式定位该特定轴：

// X Axis, use backgroundPositionX //
function bouncebanner(){
    $('#banner').stop().animate({backgroundPositionX: -490}, 5000);
}

// Y Axis, use backgroundPositionY //
function bouncebanner(){
    $('#banner').stop().animate({backgroundPositionY: -490}, 5000);
}

另外，请考虑为背景图片添加起始位置，因为这样可以防止图像在旧浏览器中跳转，如下所示：

background: url(/media/residential-services-705.jpg) no-repeat 0 0;

JSFiddle for X Axis

JSFiddle for Y Axis

我希望这有帮助！

JQuery滚动div的背景图像

2 个答案: