Nine Posted October 20, 2014 Share Posted October 20, 2014 (edited) My first jQuery attempt :-), I have a working function now, however it should only work when the mouse hovers over the image. I tried something with the hover function, but that does not work properly. Something strange is happening (I displayed the mouse coordinates to see what is happening). http://jsfiddle.net/the1sjLm/5/ <head><script src="jquery-1.11.1.js"></script><script type="text/javascript">$(document).mousemove(function(event) { var relativeX = Math.ceil(event.pageX/123); var currentStep = relativeX*-230; $(".model").hover(function(){ $(".model").css("background-position", 0+" "+(currentStep)+"px"); //just to check what is happeninga $("span").text("X: " + event.pageX + ", Y: " + event.pageY) });});</script><style type="text/css">.model { width: 300px; height: 230px; background-image: url('sprite.png'); background-position:0 3000px;}</style></head><body><div class="model" style=""></div><p>Data <span></span></p></body> Edited October 20, 2014 by Nine Link to comment Share on other sites More sharing options...
justsomeguy Posted October 20, 2014 Share Posted October 20, 2014 What is happening, and what do you expect to happen? One thing is that you should not set up that event handler inside another event handler. Each time the mouse moves on the page you define another hover handler for the image. Only define that handler once. Link to comment Share on other sites More sharing options...
dustcomposer Posted October 21, 2014 Share Posted October 21, 2014 I don't know what you're trying to achieve, but if you want to open/close the window (on the pic) when the mouse moving on the image.. this will do: * change the cursor css to pointer to make it more 'make sense'. * move the mouse horizontally on the image $(".model").mousemove(function(){ var relativeX = Math.ceil(event.pageX/123);var currentStep = relativeX*-230;$(".model").css("background-position", 0+" "+(currentStep)+"px");$("span").text("X: " + event.pageX + ", Y: " + event.pageY); }); Link to comment Share on other sites More sharing options...
Nine Posted October 22, 2014 Author Share Posted October 22, 2014 What I am trying to achieve is that the blinds are turning based on the mouse pointer. it should look like they are following the mouse. I rendered 13 images in which the blinds have a different angle very time so it looks that they are turning around when shown in the right order. Based on the mouse position one of the 13 images is shown. I only want that the image is changing when the mouse is in the area of the image, now the width of the whole screen is used and I want only to use the part where the image is located. Does that explains a bit more? I will look into the code above, see if I can use it for what I want to achieve. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 22, 2014 Share Posted October 22, 2014 The hover event only fires once, when you start hovering over the object. It does not keep firing as you move around. The mousemove event does keep firing, though. So your animation code needs to go in the mousemove event. You can use the mouseover and mouseout events to figure out whether to animate during mousemove.So, when you move the mouse over the image the mouseover event will fire, and inside that event you set a flag like do_animate=true. The mousemove event should check if do_animate is true (meaning that the mouse is over the image), and, if so, do the animation sequence. The mouseout event for the image will set do_animate back to false so that once the mouse leaves the image it will stop animating.http://www.quirksmode.org/js/events_mouse.htmlI'm not sure how jQuery corresponds with mouseover and mouseout, those events are built-in. Maybe jQuery has a wrapper for them. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now