Rotating an element based on cursor position in a separate element

问题

I've been Working on a breadcrumbs directory feature recently that requires an element to rotate based on the cursor x position within the breadcrumbs container element. Long story short, I need the arrow in the lower '#pointer-box' to always point at the cursor when it's within the '#target-box'.

I'm looking for two separate formulas that will a.) set the initial left-most position of the arrow when the '#target-box' cursor x position is at 0, and b.) keep the arrow's left-most and right-most rotation properties proportional at any browser width or on window resize.

Any help is greatly appreciated.

Here's the live demo. http://jsfiddle.net/HeFqh/

Thank you

Update

With help from Tats_innit I was able to get the arrow pointing at the cursor when it's inside the '#target-box'. Now I have two specific issues to solve.

a.) When the window is resized the arrow and cursor are no longer aligned.

b.) The 'var y' on 'mousemove' is not deducting the top offset

var y = e.pageY - this.offsetTop

The updated live demo. http://jsfiddle.net/HeFqh/11/

Thank you

回答1:

Hiya from @brenjt's :) response above pasting this as answer post & here is a sample demo http://jsfiddle.net/JqBZb/

Thanks and further helpful link here: jQuery resize to aspect ratio & here How to resize images proportionally / keeping the aspect ratio?

Please let me know if I missed anything! Hope this helps! have a nice one, Cheers!

jquery code

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);
}

来源：https://stackoverflow.com/questions/9972449/rotating-an-element-based-on-cursor-position-in-a-separate-element

标签

jquery

css

rotation

mousemove