0

次のエラー リンクで確認できる CSS/JQUERY 効果に似たものを作成したいと考えています。

http://new.livestream.com/error

私が知りたいのは、マウスの位置に応じて背景画像を移動させ、JQUERYを使用する方法です。私を助けることができるいくつかのコードを見てきましたが、私はJQUERYにあまり熱心ではないので、助けを求めます. コードを投稿します：

$(document).ready(function(){
  $('#home a')
   // On mouse over, move the background on hover
   .mouseover(function(){
     $(this).stop().animate({backgroundPosition: "0 -54px"}, 500);
   })
   // On mouse out, move the background back
   .mouseout(function(){
      $(this).stop().animate({backgroundPosition: "0 0"}, 500);
   })
 });

現在のマウスの位置に応じて、静的な「0 -54px」の値を動的な値に変更する必要があると思いますか?

よろしくお願いします

4

2 に答える 2

0

mouseMove()そうです、おそらくイベントを聞きたいと思うでしょう

mouseMove に関する jQuery ドキュメントについては、このリンクを参照してください。

$("#target").mousemove(function(event) {
    var mouseX = event.pageX;
    var mouseY = event.pageY;
    // you can now use mouseX and mouseY to calculate and set the background position or offset
});
于 2012-04-25T09:29:25.767 に答える
0

コードを機能させる時間がありませんでしたが、私が話していた効果をどのように望んでいるかについては、このチュートリアルを使用できます:)

http://webdev.stephband.info/parallax.html

よろしくお願いします。力があなたと共にありますように！

于 2012-04-25T21:55:56.657 に答える