1

幅100％、高さ284pxの#photoStripeというdivと、幅5000pxの背景画像があります。次に、その上に左右のナビゲーションボタンがあります。アイデアは、背景画像を左右に段階的にアニメーション化することにより、左右にパンできるようにすることです。

私は人気のある背景位置プラグインを使用しています。これを使用すると、背景位置の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では問題ないようです。これが私のコードです。すべてが揃っていると思いますか？コードpls全体を投稿していただけませんか

<!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 に答える