Вращение элемента на основе положения курсора в отдельном элементе

Недавно я работал над функцией каталогов палитры, в которой элемент должен вращаться в зависимости от положения курсора x внутри элемента контейнера breadcrumbs. Короче говоря, мне нужна стрелка в нижнем поле "# указатель", чтобы всегда указывать курсор, когда он находится в "# target-box" .

Я ищу две отдельные формулы, которые будут.) установите начальное левое положение стрелки, когда позиция курсора "# target-box" находится в 0 и b.) держите стрелку влево, большинство и самых правых свойств вращения пропорциональны при любой ширине браузера или при изменении размера окна.

С помощью Tats_innit мне удалось получить стрелку, указывающую на курсор, когда она находится в поле "# target-box" . Теперь у меня есть две конкретные проблемы.

a.) Когда окно изменяется, стрелка и курсор больше не выравниваются.

b.) "var y" на "mousemove" не вычитает верхний смещение

Ответы

Ответ 1

Hiya from @brenjt:) ответ выше вставки в качестве ответа, и вот пример demo http://jsfiddle.net/JqBZb/

Спасибо и дальнейшая полезная ссылка здесь: jQuery изменить размер в пропорции и здесь Как изменить размер изображений пропорционально/сохранить аспект соотношение?

Пожалуйста, дайте мне знать, если я пропустил что-нибудь! Надеюсь это поможет! хорошо, Cheers!

код 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);
}