Картинка, двигующаяся за мышкой

@allasan-1 · Регистрация: 13.07.2013

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

Здравствуйте!
Есть div размерами, например, 900x100px.
В Div'e находится картинка, размером 100x100px.
Мне нужно сделать, чтобы она двигалась вместе с мышкой, когда курсор находится в div'e.

Скажите пожалуйста, как это сделать, или в каком направлении думать?

Вот что знаю на данный момент:
- используем событие onmousemove
- определяем координаты мышки, точкой отсчета берем див(не экран, в этом загвоздка)
- картинке делаем position: absolute по всей видимости
- говорим картинке где ей сейчас находиться (в этом также вопрос, как это сделать).

Буду благодарен за любые дельные советы и примеры.

@OT_VINTA · 25.07.2013, 17:32

HTML5
1
2
3
<div id="mydiv" style="position:relative;border:1px #000 solid; width:500px;height:500px">
<img style="position:relative;" id="myimg" src="https://www.cyberforum.ru/images/cyberforum_logo.jpg" />
</div>

JavaScript
1
2
3
4
5
6
     document.getElementById("mydiv").onmousemove = function(e){
        img = document.getElementById("myimg");
       img.style.top = e.clientY+"px";
       img.style.left = e.clientX+"px";
        
      }

Как-то так

@allasan-1 · 25.07.2013, 19:24 **[ТС]**

спасибо огромное, начало положено! вот только есть баг, картинка вылезает за пределы дива, и функция срабатывает при наведении на саму картинку (она отталкивается от курсора вправо-вниз)...

И координаты всетаки считаются от экрана, например поставил див по центру страницы, и картинка уже не у курсора

Добавлено через 31 минуту
Мне нужно чтобы именно от родительского элемента отсчет положения курсора начинался.
С учетом этого кода, гуглю как определить положение элемента от края экрана, безрезультатно

Добавлено через 20 минут
Да, прошу принять во внимание, что с js знаком очень и очень слабо, поэтому не ругайте пожалуйста за нубство плз

Добавлено через 30 минут
Данный вопрос, вообщем-то закрыт, появилась другая проблема, которую описал здесь:Почему картинка движется медленнее курсора?

@OT_VINTA · 25.07.2013, 19:42

Прмер

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <div id="mydiv" style="margin:0px auto;border:1px #000 solid; width:500px;height:500px">
      <img style="position:absolute;" id="myimg" src="https://www.cyberforum.ru/images/cyberforum_logo.jpg" /></div>
    <script>
      div = document.getElementById("mydiv")
     div.onmousemove = function(e){
       img = document.getElementById("myimg");
       if(e.clientY+img.clientHeight <= div.offsetTop+div.clientHeight){img.style.top = e.clientY+"px";}
       if(e.clientX+img.clientWidth <= div.offsetLeft+div.clientWidth){img.style.left = e.clientX+"px";}
        
      }
    </script>
 
  </body>
</html>

ничего не дёргается

@allasan-1 · 25.07.2013, 19:58 **[ТС]**

Сообщение от OT_VINTA

ничего не дёргается

Спасибо!
Хотя спасибо здесь мало будет!
Эх, были бы wm сейчас, отправил бы не задумываясь в качестве алаверды )

Ты хороший человек!

Добавлено через 5 минут
Прошу прощения, еще один вопросик. Нужно, чтобы курсор был по середине картинки (в горизонтальном отношении). Картинка шириной 100px. делаю так:

JavaScript
1
img.style.left = e.clientX-50+"px";

В итоге картинке не доходит в правую сторону дива, а в левую - уходит за пределы дива

@OT_VINTA · 25.07.2013, 20:16

Добавлено через 9 минут
Пример

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <div id="mydiv" style="margin:0px auto;border:1px #000 solid; width:500px;height:500px">
      <img style="position:absolute;" id="myimg" src="https://www.cyberforum.ru/images/cyberforum_logo.jpg" /></div>
    <script>
      div = document.getElementById("mydiv")
     div.onmousemove = function(e){
       img = document.getElementById("myimg");
if((e.clientY+img.clientHeight/2 <= div.offsetTop+div.clientHeight)&&(e.clientY-img.clientHeight/2 >= div.offsetTop)){
img.style.top = (e.clientY-(img.clientHeight/2))+"px";
}
if((e.clientX+img.clientWidth/2 <= div.offsetLeft+div.clientWidth)&&(e.clientX-img.clientWidth/2 >= div.offsetLeft)){
  img.style.left = (e.clientX-(img.clientWidth/2))+"px";
}  
      }
    </script>
 
  </body>
</html>

@allasan-1 · 25.07.2013, 20:19 **[ТС]**

OT_VINTA, Слушай, да ты гений просто!

Огромная благодарность!

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .

@allasan-1 0 / 0 / 0 Регистрация: 13.07.2013 Сообщений: 25

	Картинка, двигующаяся за мышкой 25.07.2013, 17:18. Показов 19779. Ответов 6 Метки нет (Все метки) Здравствуйте! Есть div размерами, например, 900x100px. В Div'e находится картинка, размером 100x100px. Мне нужно сделать, чтобы она двигалась вместе с мышкой, когда курсор находится в div'e. Скажите пожалуйста, как это сделать, или в каком направлении думать? Вот что знаю на данный момент: - используем событие onmousemove - определяем координаты мышки, точкой отсчета берем див(не экран, в этом загвоздка) - картинке делаем position: absolute по всей видимости - говорим картинке где ей сейчас находиться (в этом также вопрос, как это сделать). Буду благодарен за любые дельные советы и примеры. 0

@allasan-1 0 / 0 / 0 Регистрация: 13.07.2013 Сообщений: 25
	25.07.2013, 19:24 [ТС]
	спасибо огромное, начало положено! вот только есть баг, картинка вылезает за пределы дива, и функция срабатывает при наведении на саму картинку (она отталкивается от курсора вправо-вниз)... И координаты всетаки считаются от экрана, например поставил див по центру страницы, и картинка уже не у курсора Добавлено через 31 минуту Мне нужно чтобы именно от родительского элемента отсчет положения курсора начинался. С учетом этого кода, гуглю как определить положение элемента от края экрана, безрезультатно Добавлено через 20 минут Да, прошу принять во внимание, что с js знаком очень и очень слабо, поэтому не ругайте пожалуйста за нубство плз Добавлено через 30 минут Данный вопрос, вообщем-то закрыт, появилась другая проблема, которую описал здесь:Почему картинка движется медленнее курсора? 0

@allasan-1 0 / 0 / 0 Регистрация: 13.07.2013 Сообщений: 25
	25.07.2013, 20:19 [ТС]
	OT_VINTA, Слушай, да ты гений просто! Огромная благодарность! 0