FORUMS: list search recent posts

Jquery - Image following mouse on a pivot/axel

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Letizia MargoJquery - Image following mouse on a pivot/axel
by on Aug 21, 2011 at 6:14:41 am

Hi, I tried looking around for a javascript that can do this with no luck so far...

Basically for a website designed for the art of survival information I want to make a navigation in the shape of a compass (all around the inner ring) and have the compass needle follow the mouse whenever it's on the page.

I saw a lot of scripts that allows something to follow mouse, but not one that suits my need, because the compass needle need to be anchored at the middle.

Do you think this is possible? Thank you.


Return to posts index

Curtis ThompsonRe: Jquery - Image following mouse on a pivot/axel
by on Aug 22, 2011 at 12:47:53 am

hello...

like this?

http://metatroid.com/articles/CSS3%20transforms%20-%20rotate%20image%20with...

you'd just have to make your compass bg and then do an overlay of some sort of arrow image and then rotate that like that example, i'd think...

sitruc


Return to posts index

Letizia MargoRe: Jquery - Image following mouse on a pivot/axel
by on Aug 22, 2011 at 5:11:28 am

Yes! That's it!! Thanks for your help :D


Return to posts index


Letizia MargoRe: Jquery - Image following mouse on a pivot/axel
by on Aug 23, 2011 at 1:12:29 am

I tried following the instructions in that link but it wouldn't rotate... Did I do it wrong? Is there anything else I should be adding in the code other than this? I added a link to jquery just in case but it still wouldn't work.




$(document).ready(function() {

var img = $('.image');
if(img.length > 0){
var offset = img.offset();
function mouse(evt){
var center_x = (offset.left) + (img.width()/2);
var center_y = (offset.top) + (img.height()/2);
var mouse_x = evt.pageX; var mouse_y = evt.pageY;
var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
var degree = (radians * (180 / Math.PI) * -1) + 90;
img.css('-moz-transform', 'rotate('+degree+'deg)');
img.css('-webkit-transform', 'rotate('+degree+'deg)');
img.css('-o-transform', 'rotate('+degree+'deg)');
img.css('-ms-transform', 'rotate('+degree+'deg)');
}
$(document).mousemove(mouse);
}
});



Thank you.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]