-2

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

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

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

マークアップコード:

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

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

3 に答える 3

0
$("#block").animate({
    marginLeft: "100px"
}, 1500, function(){
    $(this).animate({
         marginRight: "100px"
    });
});
于 2012-12-28T13:32:25.930 に答える
0

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

.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 );
});
于 2012-12-28T13:11:53.377 に答える
0

これを参照してください: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

于 2012-12-28T13:56:48.997 に答える