jquery - css、jquery：背景画像の照準

Question

大きな画像（画像の名前：image.jpg）がの背景として使用されdivます。

画像の一部（70％と仮定）が表示され、画像はゆっくりと右方向に移動します。残りの部分がいっぱいになると、左に移動し始めます。

クロスブラウザ互換性でそれを達成する方法は？

マークアップコード：

<div class="my_div"></div>

<style type="text/css">
.my_div{
     background-image: url('/img/image.jpg');
 }
</style>

Answer 1

$("#block").animate({
    marginLeft: "100px"
}, 1500, function(){
    $(this).animate({
         marginRight: "100px"
    });
});

Answer 2

配置するには、次のようにします

.my_div{
  background: url(img/image.jpg) no-repeat top right;
  margin-top: 10px;
  margin-right: 10px;
}

アニメーション化するには、jqueryhttp : //api.jquery.com/animate/を使用してマージンをアニメーション化するだけです。

$(".my_div").animate({
    marginRight: "100px"
  }, 1500 );

私はこれをテストしませんでしたが、このようなものでうまくいくはずです

開始するには、ID = "button"のボタンを作成し、クリックします。

<input type="button" id="button" value="animate me" />

そして、js

$("#button").click(function(){
  $(".my_div").animate({
    marginRight: "100px"
  }, 1500 );
});

Answer 3

これを参照してください：http：//jsfiddle.net/fwyJz/2/

$(function() {
   animate();
  setInterval(function() { animate();}, 7000);
});
function animate()
{
 $(".my").animate({
    backgroundPosition: "(-200px 0px)"
}, 3500, function() {
    $(this).animate({
        backgroundPosition: "0px 0px"
    }, 3500).end();
});
}

これはjsファイルを使用します：jquery.bgpos