Обработчик события на mousemove

@Black_Star · Регистрация: 06.05.2016

Студворк — интернет-сервис помощи студентам

Добрый день уважаемые. Подскажите пожалуйста, как написать правильно функцию которая будет следить за положением курсора на экране и смещать блоки (через transform: translateX translateY), но на ограниченное пространство для каждого блока?
Вот пример https://jsfiddle.net/q3kgurd3/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="wrappen">
  <div class="block1"> </div>
  <div class="block2"> </div>
  <div class="block3"> </div>
  <div class="block4"></div>  
</div>
 
 
<!-- bl1 x -14/14   y -13/12 -->
<!-- bl2 x -24/24   y -23/22 -->
<!-- bl3 x -34/34   y -33/32 -->
<!-- bl4 x -54/54   y -53/52 -->

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
.wrappen {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  margin: 0 auto;
}
 
.block1 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -75px;
  margin-top: -75px;
  background: red;
  width: 150px;
  height: 150px;
}
 
.block2 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  background: gold;
  width: 100px;
  height: 100px;
}
 
.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;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var bl1 = $(".block1"),
  bl2 = $(".block2"),
  bl3 = $(".block3"),
  bl4 = $(".block4");
 
var doc = {
  w: $(window).width(),
  h: $(window).height(),
  wC: $(window).width() / 2,
  hC: $(window).height() / 2
};
var mouse = {
  x: 0,
  y: 0
};
 
$(window).resize(function() {
  doc = {
    w: $(window).width(),
    h: $(window).height(),
    wC: $(window).width() / 2,
    hC: $(window).height() / 2
  }
});
 
$(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)');
 
});

но он немного не коректен, мне необходимо что б первый блок мог смещаться в приделах по Х ( -14 до 14) и по Y ( от -13 до 12), как бы следя за курсором, ну и с остальными блоками аналогично, только что б реакция отклика была скажем по +40мс (с небольшой задержкой) на каждый новый блок?

@Уф · 18.04.2017, 22:01

ты хочешь сделать параллакс эффект? Параллакс? Относительные перемещения картинок!

@Black_Star · 18.04.2017, 22:42 **[ТС]**

Да, это похоже на то что мне надо, единственно, что в отличии от данного примера мне необходима реакция наоборот. Что б колобки как бы откланялись по направлению к курсору мыши. Как пирамидка следящая за курсором

@Уф · 19.04.2017, 09:35

песочница

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div.dv {
  position: absolute;
  text-align: center;
}
#d1 {
  top:85px;
  left: 100px;
  z-index: 1;
}
#d2 {
  top:95px;
  left: 110px;
  z-index: 2;
}
#d3 {
  top:105px;
  left: 120px;
  z-index: 3;
}
#d4 {
  top:115px;
  left: 130px;
  z-index: 4;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).on('mousemove',function(e){
    var corx = e.pageX,
        cory = e.pageY,
        w = $(this).width(),
      h = $(this).height(),
      movx = (w/2-corx)/(w/2),
      movy = (h/2-cory)/(h/2);
    $('div').each(function(i){
        var l = 100 + i*10;
    $(this).css('left', (l-(30*i*movx))+'px' );
    $(this).css('top', (l-(30*i*movy))+'px' );
    });
});

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id="d1" class="dv">
<img width=120px src="http://www.tumencev.pp.ua/uploads/2011/01/YAZOO_SMILIES-CONFUSED.png">
</div>
<div id="d2" class="dv">
<img width=100ox src="http://www.tumencev.pp.ua/uploads/2011/01/YAZOO_SMILIES-CONFUSED.png">
</div>
<div id="d3" class="dv">
<img width=80px src="http://www.tumencev.pp.ua/uploads/2011/01/YAZOO_SMILIES-CONFUSED.png">
</div>
<div id="d4" class="dv">
<img width=60px src="http://www.tumencev.pp.ua/uploads/2011/01/YAZOO_SMILIES-CONFUSED.png">
</div>

@Black_Star · 19.04.2017, 09:47 **[ТС]**

Да, спасибо это похоже на то что мне надо.
Ещё вопрос, можешь глянуть вот этот код https://jsfiddle.net/xrfkzy96/1/

HTML5
1
2
3
<div class="wrappen">
  <div class="block"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wrappen {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
 
.block {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  background-color: green;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var.block = $(".block"),
 
  var doc = {
    w: $(window).width(),
    h: $(window).height(),
    wC: $(window).width() / 2,
    hC: $(window).height() / 2
  };
var mouse = {
  x: 0,
  y: 0
};
 
$(window).resize(function() {
  doc = {
    w: $(window).width(),
    h: $(window).height(),
    wC: $(window).width() / 2,
    hC: $(window).height() / 2
  }
});
 
var currentX = $(window).mousemove(function moveObject(e) {
  return mouse.x = ((e.pageX - doc.w + doc.wC) / (doc.wC / 2));
});
 
 
var currentY = $(window).mousemove(function moveObject(e) {
  return mouse.y = ((e.pageY - doc.h + doc.hC) / (doc.hC / 2));
});
 
console.log(currentX + " = currentX");
console.log(currentY + " = currentY");
 
 
$(window).mousemove(function moveObject(e, currentX, currentY) {
 
  block.css('transform', 'translate(' + currentX + 'px, ' + currentY + 'px)');
 
});
 
 
};

почему мои функции вот в этом примере возвращают объект в переменные currentX и currentY? если мне необходимо просто получить текущие координати для дальнейшей работы с ними? Как реализовать правильно, если есть необходимость в будущем работать с трансформацией (перемещением) нескольких блоков?

Новые блоги и статьи Все статьи Все блоги /
Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор значений справочника Maks 21.03.2026 Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	18.04.2017, 22:01
	ты хочешь сделать параллакс эффект? Параллакс? Относительные перемещения картинок! 0

@Black_Star 23 / 22 / 17 Регистрация: 06.05.2016 Сообщений: 260
	18.04.2017, 22:42 [ТС]
	Да, это похоже на то что мне надо, единственно, что в отличии от данного примера мне необходима реакция наоборот. Что б колобки как бы откланялись по направлению к курсору мыши. Как пирамидка следящая за курсором 0