Форум программистов, компьютерный форум CyberForum.ru
CyberForum.ru - форум программистов и сисадминов > >
Восстановить пароль Регистрация
 
allasan-1
Новичок
0 / 0 / 0
Регистрация: 13.07.2013
Сообщений: 15
25.07.2013, 17:18     Картинка, двигующаяся за мышкой
  #1
Здравствуйте!
Есть div размерами, например, 900x100px.
В Div'e находится картинка, размером 100x100px.
Мне нужно сделать, чтобы она двигалась вместе с мышкой, когда курсор находится в div'e.

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

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

Буду благодарен за любые дельные советы и примеры.
AdAgent
Объявления
25.07.2013, 17:18
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.07.2013, 17:18

Посмотрите здесь:

JavaScript Как узнать ID клетки TABLE на которую кликнули мышкой?

JavaScript Смена прозрачности фотографии при наведении мышкой

JavaScript Движение картинки мышкой

JavaScript Перемещение div блока мышкой

JavaScript Передвижение блока мышкой

jQuery Jquery Вращение обьекта под мышкой

JavaScript Движение объекта за мышкой с заданной скоростью

jQuery Перемещение DIV с картинкой за мышкой

JavaScript Как ускорить движение объекта мышкой?

JavaScript Авто клик мышкой рандомно по странице

OT_VINTA
Форумчанин
113 / 90 / 2
Регистрация: 13.02.2013
Сообщений: 252
25.07.2013, 17:32
  #2
Код 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="http://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
Новичок
0 / 0 / 0
Регистрация: 13.07.2013
Сообщений: 15
25.07.2013, 19:24  [ТС]
  #3
спасибо огромное, начало положено! вот только есть баг, картинка вылезает за пределы дива, и функция срабатывает при наведении на саму картинку (она отталкивается от курсора вправо-вниз)...

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

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

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

Добавлено через 30 минут
Данный вопрос, вообщем-то закрыт, появилась другая проблема, которую описал здесь:Почему картинка движется медленнее курсора?
OT_VINTA
Форумчанин
113 / 90 / 2
Регистрация: 13.02.2013
Сообщений: 252
25.07.2013, 19:42
  #4
Прмер
Код 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="http://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
Новичок
0 / 0 / 0
Регистрация: 13.07.2013
Сообщений: 15
25.07.2013, 19:58  [ТС]
  #5
Цитата Сообщение от OT_VINTA Посмотреть сообщение
ничего не дёргается

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

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

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

Код JavaScript
1
img.style.left = e.clientX-50+"px";
В итоге картинке не доходит в правую сторону дива, а в левую - уходит за пределы дива
OT_VINTA
Форумчанин
113 / 90 / 2
Регистрация: 13.02.2013
Сообщений: 252
25.07.2013, 20:16
  #6
Добавлено через 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="http://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
Новичок
0 / 0 / 0
Регистрация: 13.07.2013
Сообщений: 15
25.07.2013, 20:19  [ТС]     Картинка, двигующаяся за мышкой
  #7
OT_VINTA, Слушай, да ты гений просто! Огромная благодарность!
Yandex
Объявления
25.07.2013, 20:19
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему
Опции темы

Текущее время: 10:22. Часовой пояс GMT +4.
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.