我最近一直在开发面包屑目录功能,需要根据面包屑容器元素中的光标x位置旋转元素.长篇小说,我需要较低的“#指针盒”中的箭头,当它位于“#目标框”内时,总是指向光标.
我正在寻找两个单独的公式,将a.)设置箭头的最初最左侧位置,当’#目标 – 框’光标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的:)回复以上粘贴这回答帖子&这里是一个示例演示
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);
}
