jquery - 使用 Jquery 进行精美的背景移动

Question

我想做一些类似于 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”值更改为动态值，对吧？

最好的祝福

Answer 1

没错，您可能会想收听该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
});

Answer 2

我没有时间让代码工作，但是对于那些想要我所说的效果的人来说可以使用这个教程:)

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

最好的问候，愿力量与你同在！