Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 26, средняя оценка - 4.96
allasan-1
0 / 0 / 0
Регистрация: 13.07.2013
Сообщений: 19
#1

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

25.07.2013, 17:18. Просмотров 4390. Ответов 6
Метки нет (Все метки)

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

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

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

Буду благодарен за любые дельные советы и примеры.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.07.2013, 17:18
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Картинка, двигующаяся за мышкой (JavaScript):

Во время работы у меня замирает картинка, мышкой не пошевелить, из колонок и корпуса раздаётся писк. - Компьютерное железо
Сначало это было во время игр, терепь стало и во время просмотря фильмов и тд.- Во время работы у меня замирает картинка, мышкой не...

Нужно, чтобы картинка на сайте растягивалась под размер экрана, как это сделать ? (Пропорционально, картинка высокого расширения и качества) - HTML, CSS
binding text

Есть сайт на Jommla 1.7. В нем сбоку модуль (блок). В этом модуле есть картинка. Как сделать так, чтобы автоматически обновлялась только картинка? - HTML, CSS
http://stost.ru/ny/ny.php - вот картинка, может, кому пригодится) типа сколько до НГ осталось)

чё-то с мышкой - Мыши
мышка во время некоторых игр скачет по всему экрану!!!!!!!!! уже и винду переустонавливал не пологло помогите...

что то с мышкой - Мыши
Привет. У меня проблема с мышкой. Сначала у меня мышка начала отключаться иногда...чаще всего когда играл в Counter-Strike. Потом она вобще...

Работа с мышкой - C#
Всем привет. Очень хотел бы узнать две вещи: 1) может ли программа управлять курсором (хотя бы в теории) 2) можно ли сделать программу...

6
OT_VINTA
114 / 91 / 2
Регистрация: 13.02.2013
Сообщений: 260
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";
        
      }
Как-то так
1
allasan-1
0 / 0 / 0
Регистрация: 13.07.2013
Сообщений: 19
25.07.2013, 19:24  [ТС] #3
спасибо огромное, начало положено! вот только есть баг, картинка вылезает за пределы дива, и функция срабатывает при наведении на саму картинку (она отталкивается от курсора вправо-вниз)...

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

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

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

Добавлено через 30 минут
Данный вопрос, вообщем-то закрыт, появилась другая проблема, которую описал здесь:Почему картинка движется медленнее курсора?
0
OT_VINTA
114 / 91 / 2
Регистрация: 13.02.2013
Сообщений: 260
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>
ничего не дёргается
1
allasan-1
0 / 0 / 0
Регистрация: 13.07.2013
Сообщений: 19
25.07.2013, 19:58  [ТС] #5
Цитата Сообщение от OT_VINTA Посмотреть сообщение
ничего не дёргается

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

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

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

Javascript
1
img.style.left = e.clientX-50+"px";
В итоге картинке не доходит в правую сторону дива, а в левую - уходит за пределы дива
0
OT_VINTA
114 / 91 / 2
Регистрация: 13.02.2013
Сообщений: 260
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>
1
allasan-1
0 / 0 / 0
Регистрация: 13.07.2013
Сообщений: 19
25.07.2013, 20:19  [ТС] #7
OT_VINTA, Слушай, да ты гений просто! Огромная благодарность!
0
25.07.2013, 20:19
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.07.2013, 20:19
Привет! Вот еще темы с ответами:

Скрол мышкой - Python
Всем доброго времени _уток. Пишу бот для игры, столкнулся с необходимостью управления мышкой. В частности нужно один раз проскролить...

О взаимодействии ОС с мышкой - Мыши
Здравствуйте!! помогите, пожалуйста! На работе старое оборудование .И, в последнее время начались проблемы с мышкой. Происходит как...

Работа с мышкой - Delphi
Доброго времени суток Надо отловить координаты нажатия мыши в чужих окнах в таймере и записать их в мемо в виде (x,y) - right/left ...

Сложности с мышкой - Мыши
Здравствуйте. Перейду сразу к делу. Год назад я купил мышку A4tech Bloody V3. Работала нормально, проявляла себя хорошо как и в ФШ так и в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.