基于单独元素中的光标位置旋转元素 [英] Rotating an element based on cursor position in a separate element

问题描述

我最近使用breadcrumbs目录功能，需要根据breadcrumbs容器元素中的光标x位置旋转元素。长篇小说，我需要下面的＃指针框中的箭头总是指向光标，当它在'＃目标框。

我正在寻找两个单独的公式，将a。）设置箭头的初始最左侧位置，当'＃目标框'光标x位置在0，和b。）保持箭头的最左和最右旋转属性成比例在任何浏览器宽度或窗口调整大小。

任何帮助都非常感谢。

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

谢谢

p>

更新

在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调整大小与宽高比< a&这里如何调整图片大小并保持与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）; 
} 
 
 
  

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 do I resize images and keep the proportion / aspect ratio with jQuery?

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

​

这篇关于基于单独元素中的光标位置旋转元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！