1

我想简单地将背景图像在 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}
    );
}
4

2 回答 2

1 
backgroundPosition: '0 -490'

不要使用可能导致问题的 px 和括号

于 2012-09-04T13:19:49.497 回答
0

如果您只想为其中一个轴（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;

X 轴的 JSFiddle

Y 轴的 JSFiddle

我希望这有帮助！

于 2012-09-04T13:33:05.733 回答