問題描述

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

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

?

這篇關于根據單獨元素中的光標位置旋轉元素的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！