別の要素のカーソル位置に基づいて要素を回転する

Question

私はbreadcrumbsのコンテナ要素内のカーソルxの位置に基づいて要素を回転する必要がある、最近、breadcrumbsディレクトリ機能で作業してきました。長い話をすると、 '＃target-box'の中にあるときに、カーソルを常に指すために、 '＃pointer-box'の下にある矢印が必要です。

私は、 '＃target-box'カーソルxの位置が0のときに矢印の最初の一番左の位置を設定し、b。）矢印の左を保持するブラウザの幅やウィンドウのサイズに比例した最も右端の回転特性と右端の回転特性

ご協力いただきまして誠にありがとうございます。

ここにライブデモがあります。 http://jsfiddle.net/HeFqh/

は

いただきありがとうございます更新

Tats_innitからの助けを借りて、私はそれが「＃ターゲットボックス」内だときにカーソルで指し示す矢印を取得することができました。今私は解決すべき2つの特定の問題があります。

）。ウィンドウのサイズが変更されると、矢印とカーソルは合わせられなくなります。

B。）トップを控除されていない 'のMouseMove' オン 'のvar y' が

var y = e.pageY - this.offsetTop 

更新ライブデモ

を相殺しました。 http://jsfiddle.net/HeFqh/11/

はbrenjtの@から

Answer 1

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

​