Форум программистов, компьютерный форум CyberForum.ru Форум программистов | Компьютерный форум | Форум web-программистов | Форум по электронике и бытовой технике | Форум о софте | Научный форум | Карьера и бизнес
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
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Раздел Автор Дата
jQuery Перемещение DIV с картинкой за мышкой
Здравствуйте уважаемые. Условие: Есть див с картинкой, его размеры, скажем 4000на2000, позиционирование абсолют. Требуется: ПЛАВНО двигать див за мышкой. Тоесть зажимаешь левую кнопку и...
jQuery Akademik3110 11.12.2013 15:52
jQuery Претаскивание товаров мышкой в корзину
Есть такая тема: http://satton.ru Автор: Гавриленко Виктор Но мне нужно сделать так, чтобы товар перетаскивался в корзину, внутри корзины тоже перемещался мышкой, и также мышкой можно было бы...
jQuery buktopz 28.05.2013 13:19
HTML, CSS Нужно, чтобы картинка на сайте растягивалась под размер экрана, как это сделать ? (Пропорционально, картинка высокого расширения и качества)
binding text
HTML, CSS Evo01 19.01.2013 17:23
JavaScript Передвижение блока мышкой
Хочу сделать перемещение блока мышью. Узнавать координаты мыши научился, но в JS коде выскакивает ошибочка. function MoveWindow(id) { document.getElementById(id).style.left=event.pageX;...
JavaScript Kolovrat 06.07.2012 20:46
JavaScript Перемещение div блока мышкой
Есть скрипт перемещения div блока, нужно чтобы по достижению определённых координат перемещение останавливалось. Подскажите как это осуществить? function $(v) { return(document.getElementById(v)); }...
JavaScript Deself 20.05.2012 09:32
JavaScript Движение картинки мышкой
Товарищи. Есть картинка, надо чтобы наведя на неё и нажав левую кнопку мыши можно было её крутить. Как это вообще можно реализовать? Если есть у кого код, поделитесь. Думаю как-то через html5 с...
JavaScript karpov. 07.03.2012 13:13
Во время работы у меня замирает картинка, мышкой не пошевелить, из колонок и корпуса раздаётся писк.
Сначало это было во время игр, терепь стало и во время просмотря фильмов и тд.- Во время работы у меня замирает картинка, мышкой не пошевелить, из колонок и корпуса раздаётся писк, приходиться...
Компьютерное железо mcbrat 31.01.2011 12:54
Delphi нужно чтобы по щелчку на иконке в ListView(картинка bmp) на другую форму вставала соответствующая картинка в Image.
нужно чтобы по щелчку на иконке в ListView(картинка bmp) на другую форму вставала соответствующая картинка в Image. Принцип редактора причесок ....
Delphi для начинающих Ananas 05.05.2009 17:33
Опции темы

Текущее время: 16:50. Часовой пояс GMT +4.

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