基于单独元素中的光标位置旋转元素
我最近在使用breadcrumbs目录function，需要根据breadcrumbs容器元素中的光标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/
谢谢
Hiya来自@ brenjt的:)回复以上粘贴这个作为答案post＆这里是一个示例演示 http://jsfiddle.net/JqBZb/
谢谢和进一步有用的链接： jQuery调整宽高比和这里如何按比例调整图像/保持纵横比？
如果我遗漏了什么，请告诉我！ 希望这可以帮助！ 干得好笑！
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); }