Поворот элемента на основе позиции курсора в отдельном элементе - PullRequest
Новая
       7

Поворот элемента на основе позиции курсора в отдельном элементе

14 голосов
/ 02 апреля 2012

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

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

Любая помощь с благодарностью.

Вот живая демонстрация.http://jsfiddle.net/HeFqh/

Спасибо

Обновление

С помощью Tats_innit я смог получить стрелку, указывающую на курсор, когда он находится внутри '# целевой ящик».Теперь у меня есть две конкретные проблемы, которые необходимо решить.

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

b.) «Var y» на «mousemove»не вычитает верхнее смещение 

var y = e.pageY - this.offsetTop

Обновленная живая демонстрация.http://jsfiddle.net/HeFqh/11/

Спасибо

1 Ответ

13 голосов
/ 19 апреля 2012

Привет от @ brenjt's :) Ответ, вставленный выше в качестве поста ответа, и вот пример demo http://jsfiddle.net/JqBZb/

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

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

код запроса 

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

​
...