Форум программистов, компьютерный форум CyberForum.ru Форум программистов | Компьютерный форум | Форум web-программистов | Форум по электронике и бытовой технике | Форум о софте | Научный форум | Карьера и бизнес
CyberForum.ru - форум программистов и сисадминов > Форум Форум web-программистов > Форум JavaScript
Восстановить пароль Регистрация

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

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

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

Буду благодарен за любые дельные советы и примеры.
25.07.2013, 17:18
AdAgent
Объявления
25.07.2013, 17:32   #2
OT_VINTA
Форумчанин
Регистрация: 13.02.2013
Сообщений: 247
Репутация: 113 (90)
Лучшие ответы: 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";
        
      }
Как-то так
Другие темы раздела
JavaScript есть скрипт нужен цикл
Доброго времени суток!У меня есть скрипт позволяющий добавлять строку с семью колонками в таблицу. Я только начал изучать яваскрипт. И не знаю как написать цикл, чтобы "это" выполнялось 3 раза(мне необходимо добавить 3 строки) <script>var table=document.getElementById("myTable"); var...
Скрипт POST JavaScript
Вот проблема js код работает на локальной машине(денвер) а на хостинге нет. Думаю проблема в .post так как я не получаю $_POST //------------------ //Проверка формы //------------------ $(document).ready(function() { $("#nomer").blur(function() {...
25.07.2013, 19:24  [ТС]   #3
allasan-1
Новичок
Регистрация: 13.07.2013
Сообщений: 15
Репутация: 0 (0)
спасибо огромное, начало положено! вот только есть баг, картинка вылезает за пределы дива, и функция срабатывает при наведении на саму картинку (она отталкивается от курсора вправо-вниз)...

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

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

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

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

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

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

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

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

Похожие темы
Тема Раздел Автор Дата
HTML, CSS Нужно, чтобы картинка на сайте растягивалась под размер экрана, как это сделать ? (Пропорционально, картинка высокого расширения и качества)
binding text
HTML, CSS Evo01 19.01.2013 17:23
HTML, CSS Есть сайт на Jommla 1.7. В нем сбоку модуль (блок). В этом модуле есть картинка. Как сделать так, чтобы автоматически обновлялась только картинка?
http://stost.ru/ny/ny.php - вот картинка, может, кому пригодится) типа сколько до НГ осталось)
HTML, CSS vvaalleekk 05.12.2011 22:19
Во время работы у меня замирает картинка, мышкой не пошевелить, из колонок и корпуса раздаётся писк. - Компьютерное железо
Сначало это было во время игр, терепь стало и во время просмотря фильмов и тд.- Во время работы у меня замирает картинка, мышкой не пошевелить, из колонок и корпуса раздаётся писк, приходиться перезагружать компик, менял дрова, менял винду, ничего не помогло, всёравно висла, думал проблема в БП,...
Компьютерное железо mcbrat 31.01.2011 12:54
чё-то с мышкой - Периферийные устройства
мышка во время некоторых игр скачет по всему экрану!!!!!!!!! уже и винду переустонавливал не пологло помогите плииииииииииизззззззз!!!!!!!!!!!!!!!!!!!!!!!!!
Периферийные устройства русся 09.08.2010 09:26
Delphi нужно чтобы по щелчку на иконке в ListView(картинка bmp) на другую форму вставала соответствующая картинка в Image.
нужно чтобы по щелчку на иконке в ListView(картинка bmp) на другую форму вставала соответствующая картинка в Image. Принцип редактора причесок ....
Delphi для начинающих Ananas 05.05.2009 17:33
Опции темы

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

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