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()事件

See this link for the jQuery documentation on mouseMove

$("#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

致以最诚挚的问候，并且力量可能与你同在！

与Jquery的花式背景运动

2 个答案: