Xoay phần tử dựa trên vị trí con trỏ trong một phần tử riêng biệt

Question

Gần đây tôi đã làm việc trên một thư mục đường dẫn yêu cầu một phần tử xoay vòng dựa trên vị trí con trỏ x trong phần tử thùng chứa đường dẫn. Dài câu chuyện ngắn, tôi cần mũi tên trong 'con trỏ-hộp' thấp hơn để luôn luôn trỏ vào con trỏ khi nó nằm trong '# target-box'.

Tôi đang tìm hai công thức riêng biệt sẽ a.) Đặt vị trí đầu tiên bên trái nhất của mũi tên khi vị trí con trỏ '# target-box' con trỏ x là 0 và b.) Giữ mũi tên trái các thuộc tính xoay vòng bên phải và bên phải nhất tỷ lệ thuận với bất kỳ chiều rộng trình duyệt nào hoặc trên kích thước cửa sổ.

Bất kỳ trợ giúp nào được đánh giá cao.

Đây là bản trình diễn trực tiếp. http://jsfiddle.net/HeFqh/

Cảm ơn bạn

Cập nhật

Với sự giúp đỡ từ Tats_innit tôi đã có thể để có được những mũi tên trỏ vào con trỏ khi nó bên trong '# mục tiêu hộp'. Bây giờ tôi có hai vấn đề cụ thể để giải quyết.

a.) Khi cửa sổ được đổi kích thước, mũi tên và con trỏ không còn được căn chỉnh nữa.

b.) Các 'var y' bật 'MouseMove' không được khấu trừ đầu bù đắp

var y = e.pageY - this.offsetTop 

được cập nhật demo sống. http://jsfiddle.net/HeFqh/11/

Cảm ơn bạn

Answer 1

Hiya từ @ brenjt của :) phản ứng trên dán này là câu trả lời bài & đây là một mẫu bản demohttp://jsfiddle.net/JqBZb/

Cảm ơn và liên kết hơn nữa hữu ích ở đây: jQuery resize to aspect ratio & đây How to resize images proportionally/keeping the aspect ratio?

Vui lòng cho tôi biết nếu tôi bỏ lỡ bất cứ điều gì! Hi vọng điêu nay co ich! Chúc bạn vui vẻ!

jquery đang

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

​