Форум программистов, компьютерный форум 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
OT_VINTA
Форумчанин
113 / 90 / 2
Регистрация: 13.02.2013
Сообщений: 247
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
Сообщений: 247
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
Сообщений: 247
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
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Раздел Ответов Автор Дата
JavaScript Движение объекта за мышкой с заданной скоростью
Привет. Собственно вопрос, как сделать движение объекта за мышкой с заданной скоростью, да так, чтобы браузер не убить. У меня в голове одна идея. Допустим у нас объект находится по координатам...
JavaScript 9 Unick 30.07.2014 23:04
JavaScript Авто клик мышкой рандомно по странице
Здрасвствуйте Уважаемые программисты форума. Подскажите пожалуйста. Каким образом осуществить: Что бы при заходе посетителя на сайт происходил автоматический клик в рандомной области по т.н....
JavaScript 26 sam6780 30.07.2014 17:29
JavaScript Как ускорить движение объекта мышкой?
http://beta.maquetter.com/client зажимаю мышку на картинке - двигаю картинку влево-вправо - она двигается с запаздыванием, а как сделать плавное движение картинки? под 10 строчкой идет движение...
JavaScript 5 Johnlion 10.06.2014 10:20
jQuery Перемещение DIV с картинкой за мышкой
Здравствуйте уважаемые. Условие: Есть див с картинкой, его размеры, скажем 4000на2000, позиционирование абсолют. Требуется: ПЛАВНО двигать див за мышкой. Тоесть зажимаешь левую кнопку и...
jQuery 1 Akademik3110 11.12.2013 15:52
jQuery Jquery Вращение обьекта под мышкой
на фоновой картинке имеется изображение автомобиля при навидении на него мышки автомобидь должен вращаться. имеются картинки со всеми нужными позициями автомобиля. можно просто менять фотовую...
jQuery 1 UProger 21.08.2013 10:01
JavaScript Передвижение блока мышкой
Хочу сделать перемещение блока мышью. Узнавать координаты мыши научился, но в JS коде выскакивает ошибочка. function MoveWindow(id) { document.getElementById(id).style.left=event.pageX;...
JavaScript 1 Kolovrat 06.07.2012 20:46
JavaScript Перемещение div блока мышкой
Есть скрипт перемещения div блока, нужно чтобы по достижению определённых координат перемещение останавливалось. Подскажите как это осуществить? function $(v) { return(document.getElementById(v)); }...
JavaScript 1 Deself 20.05.2012 09:32
JavaScript Движение картинки мышкой
Товарищи. Есть картинка, надо чтобы наведя на неё и нажав левую кнопку мыши можно было её крутить. Как это вообще можно реализовать? Если есть у кого код, поделитесь. Думаю как-то через html5 с...
JavaScript 6 karpov. 07.03.2012 13:13
Опции темы

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