Question

I want to make something similar to the CSS/JQUERY effect that you can see in the following error link:

http://new.livestream.com/error

What I want to know is how I can make the background image move according to the mouse position and using JQUERY. I have seen some code that could help me but since I m not very keen on JQUERY I ask for some help. I post the code:

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

That s right, you ll probably want to listen for the mouseMove() event though

http://api.jquery.com/mousemove/"rel=“nofollow> See thislink 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

我没有时间让法典发挥作用,但对于希望我所谈论的效果能够利用这一理论的人来说:

rel=“nofollow”http://webdev.panhband.info/parallax.html

部队的最佳和可能与你们在一起!

友情链接