jquery - 根据光标在单独元素中的位置旋转元素

Question

我最近一直在研究面包屑目录功能，该功能需要一个元素根据光标在面包屑容器元素中的 x 位置进行旋转。长话短说，我需要下方“#pointer-box”中的箭头在“#target-box”内时始终指向光标。

我正在寻找两个单独的公式，它们将 a.) 在“#target-box”光标 x 位置为 0 时设置箭头的初始最左侧位置，以及 b.) 保持箭头的左侧-大多数和最右边的旋转属性与任何浏览器宽度或窗口调整大小成比例。

非常感谢任何帮助。

这是现场演示。 http://jsfiddle.net/HeFqh/

谢谢

更新

在 Tats_innit 的帮助下，当光标位于“#target-box”内时，我能够得到指向光标的箭头。现在我有两个具体问题要解决。

a.) 调整窗口大小时，箭头和光标不再对齐。

b.) 'mousemove' 上的 'var y' 没有扣除顶部偏移量

var y = e.pageY - this.offsetTop

更新的现场演示。 http://jsfiddle.net/HeFqh/11/

谢谢

Answer 1

来自@brenjt 的 Hiya :) 上面的回复将其粘贴为答案帖子，这是一个示例演示 http://jsfiddle.net/JqBZb/

谢谢，这里有更多有用的链接:jQuery resize to aspect ratio & 这里 How to resize images proportionally / keeping the aspect ratio?

如果我遗漏了什么，请告诉我!希望这可以帮助!祝你玩得愉快，干杯!

jquery代码

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

​