1

我有一个 100% 宽和 284 像素高的 div，名为 #photoStripe，背景图像为 5000 像素宽。然后在它上面的左右导航按钮。这个想法是能够通过左右递增地为背景图像设置动画来左右平移。

我正在使用流行的背景位置插件，它允许您同时为背景位置的 x 和 y 值设置动画。

好吧，背景动画，但它只做一次。（不能一次又一次地点击）。有什么想法吗？

jQuery：

$('#photoStripe').css({backgroundPosition:"0 0"});

$('a.moveLeft').click(function(){
    $('#photoStripe').stop().animate({backgroundPosition:'-=200px 0'}, {duration:500});
});
$('a.moveRight').click(function(){
    $('#photoStripe').stop().animate({backgroundPosition:'+=200px 0'}, {duration:500});
});

CSS：

#photoStripe {
width:100%;
height:286px;
text-align:center;
overflow:hidden;
background:url(../_images/photo_stripe.jpg);
}
4

1 回答 1

0

当我检查这段代码时，在 FF 中似乎很好，这是我的代码，你确定那里有所有东西吗？你能发布你的整个代码吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#photoStripe {
width:100%;
height:286px;
text-align:center;
overflow:hidden;
background:url(wallpaper.jpg);
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

$('#photoStripe').css({backgroundPosition:"0 0"});

$('a.moveLeft').click(function(){
    $('#photoStripe').stop().animate({backgroundPosition:'-=200px 0'}, {duration:500});
});
$('a.moveRight').click(function(){
    $('#photoStripe').stop().animate({backgroundPosition:'+=200px 0'}, {duration:500});
});

});
</script>
</head>
<body>
<a href="#" class="moveLeft">moveLeft</a>
<a href="#" class="moveRight">moveRight</a>
<div id="photoStripe">
</div>
</body>
</html>

让我知道，我会尽力帮助:)

干杯

G。

于 2011-01-27T00:18:31.477 回答