Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.04.2017, 20:04
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Обработчик события на mousemove
Добрый день уважаемые. Подскажите пожалуйста, как написать правильно функцию которая будет следить за положением курсора на экране и смещать блоки (через transform: translateX translateY), но на ограниченное пространство для каждого блока? Вот пример https://jsfiddle.net/q3kgurd3/ но он немного не корректен, мне необходимо что б первый блок мог смещаться в приделах по Х ( -14 до 14) и по Y ( от -13 до 12), как бы следя за курсором, ну и с остальными блоками аналогично, только что б реакция отклика была скажем по +40мс (с небольшой задержкой) на каждый новый блок?
Ответить с цитированием
  #2 (permalink)  
Старый 19.04.2017, 12:31
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Black_Star,
А как такой вариант?
$(window).mousemove(function (e) {
            mouse.x = ((e.pageX - doc.w + doc.wC) / (doc.wC / 50));
            mouse.y = ((e.pageY - doc.h + doc.hC) / (doc.hC / 50));

            bl1.css('transform', 'translate(' + mouse.x + 'px, ' + mouse.y + 'px)');
            bl2.css('transform', 'translate(' + (mouse.x * 0.8) + 'px, ' + (mouse.y * 0.8) + 'px)');
            bl3.css('transform', 'translate(' + (mouse.x * 0.6) + 'px, ' + (mouse.y * 0.6) + 'px)');
            bl4.css('transform', 'translate(' + (mouse.x * 0.4) + 'px, ' + (mouse.y * 0.4) + 'px)');

        });

правда, размеры блоков я немного подровнял
.block1
        {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -80px;
            margin-top: -80px;
            background: red;
            width: 160px;
            height: 160px;
        }
        
        .block2
        {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -60px;
            margin-top: -60px;
            background: gold;
            width: 120px;
            height: 120px;
        }
        
        .block3
        {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -40px;
            margin-top: -40px;
            background: pink;
            width: 80px;
            height: 80px;
        }
        
        .block4
        {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -20px;
            margin-top: -20px;
            background: green;
            width: 40px;
            height: 40px;
        }
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2017, 14:15
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Да, спасибо. Помогло) https://codepen.io/BlackStar1991/pen/ybeaxR
Ответить с цитированием
  #4 (permalink)  
Старый 19.04.2017, 14:39
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Black_Star,
Нравятся мне ваши макеты - полностью конкретизирована проблема.
Ну и конечная реализация - красиво!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработчик события срабатывает без события! Подскажите пожалуйста opawina Events/DOM/Window 3 11.09.2016 06:49
Возможно ли поставить обработчик события "click" на элемент option? Dimaz jQuery 5 05.05.2013 13:39
Дебаг js, или как найти обработчик события для тега jimm88 Events/DOM/Window 1 18.04.2012 15:11
Как "обмануть" обработчик события? itPiligrim Events/DOM/Window 0 13.05.2010 22:55
как узнать имеется ли обработчик события HelpeR Events/DOM/Window 9 17.02.2010 18:20