Entire page or multiple divs with '.mousemove'
I have the following piece of jQuery
$(document).ready(function(){
开发者_如何转开发 var vH=$('#background').height();
var vW=$('#background').width();
var vT=$('#background').offset().top;
var vL=$('#background').offset().left;
$('#test').mousemove(function(e){
var ypos=e.pageY-vT;
var xpos=e.pageX-vL;
var y=Math.round(ypos/vW*1500);
var x=Math.round(xpos/vH*200);
$('#test').val(x+' , '+y);
$('#background').css({backgroundPosition: x+'% '+y+'%'});
});
});
It moves the background when I move my mouse over the div with id="test". Now I want to change it so the background is moving no matter where you are moving the mouse over.
So is there a way to do this? Or is it possible to use multiple divs so you get something like:
$('#test', '#test2').mousemove(function(e){
I really appreciate your help!
Try this
$(document).ready(function(){
var vH=$('#background').height();
var vW=$('#background').width();
var vT=$('#background').offset().top;
var vL=$('#background').offset().left;
$(document).mousemove(function(e){
var ypos=e.pageY-vT;
var xpos=e.pageX-vL;
var y=Math.round(ypos/vW*1500);
var x=Math.round(xpos/vH*200);
$('#test').val(x+' , '+y);
$('#background').css({backgroundPosition: x+'% '+y+'%'});
});
});
You can bind an event to the document like this:
$(document).mousemove(function(e){ ...
Just be aware that all other mousemove events on any other element bubble up to the document, so if you have another handler on some element in the document, and you move the mouse over that element it will call both the handler on that element, and the one on the document (and any elements in between if they have handlers too).
You should also be aware that tracking mousemove on the document can potentially be slow, especially on older browsers. If you only need to track it for a while you should unbind the event handler when you're done with it.
I think the effect you're looking for is the parallax effect but slightly modified. So something like this, or like this.
精彩评论