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

JavaScript

Войти
Регистрация
Восстановить пароль
 
Сергей Мишин
0 / 0 / 0
Регистрация: 19.07.2016
Сообщений: 92
#1

Привязка элемента к курсору - JavaScript

19.07.2016, 20:04. Просмотров 466. Ответов 1

Привет,помогите создать следующий за курсором div контейнер,нужно чтобы при наводке становилось visibility:visible;
Код я уже реализовал,но работает он не везде,на пустом сайте с 1 дивом,перемещается за курсором,на сайте где куча дивов и элементов - далеко от курсора,растягивает страницу горизонтально и тд.
Нужно просто чтобы он следовал за курсором,был как бы вниз-правее(типично).
Относительно,страницы,род элемента,элемента,экрана клиента.
Это всплывающая подсказка,которая разворачивается и сворачивается,дизайн настроил.

HTML5
1
2
3
4
5
 <div id="mydiv" style="margin:0px auto;border:1px #000 solid; width:100px;height:100px;" onDblClick="anim('Пример текста который выводится сюда')" onClick="noanim();"> <!-- Пример элемента на которого наведен курсор -->
      <div id="myimg" class="div">  <!-- И есть сама подсказка -->
      <b>Кликните дважды чтобы развернуть</b>   <hr>  <span id="inner">Содержимое...</span> <!-- текст в подсказке -->
      </div>
      </div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  div = document.getElementById("mydiv");// Контейнер на который кликаем/наводим курсор,чтобы появилась див-подсказка
     div.onmousemove = function(e){               //
      img = document.getElementById("myimg"); //обрабатывает наведение курсора на див,делает его видимым,привязывает к курсору       
      img.style.visibility="visible";                  //
      img.style.top = e.clientY+"px";            // Это фрагмент кода который нужно изменить :(
      img.style.left = e.clientX+"px"; }         //
 
 
 
 
 
 
 
      div.onmouseout = function() {                                          //Ниже мои функции при открытие и закрытии,добавил так                  
          s = document.getElementById("myimg");
          s.style.visibility="hidden";
          noanim();
      }
     
      function anim(text) {                                      
        var u = text;
             k = document.getElementById("myimg");
             k.className = "div anim";
             k.innerHTML = " <b>Нажмите чтобы свернуть</b> <br> <hr>" + u;
      }
      function noanim() {                                         
          k = document.getElementById("myimg");
                 k.className = "div noanim";
                  k.innerHTML = " <b>Кликните дважды чтобы развернуть </b> <br> <hr> Содержимое...";          
          }
Обычный div
Привязка элемента к курсору
див который появляется после наведения
Привязка элемента к курсору
после двойного клика
Привязка элемента к курсору
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.07.2016, 20:04
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Привязка элемента к курсору (JavaScript):

Привязка элемента к верху экрана - JavaScript
Здраствуйте, ув.форумчане! Как можно привязать например, хедер, кверху экрана при прокрутке, как делается, например, на яндексе? Лучше...

Привязка элемента к определенному участку - JavaScript
Нужно чтобы один &lt;div&gt; при прокрутке всегда оставался в правом верхнем углу. Возможно ли такое? Если да то подскажите как?

привязка события click - JavaScript
Здравствуйте. консоль показывает ошибку sortField.onclick is not a function, когда пытаюсь привязать событие на click. пробовал такие...

Привязка значений в полях - JavaScript
Есть товары на сайте, называются по такому типу Товар_1 100x100 Товар_2 100x150 Товар_3 100x200 Товар_4 100x250 Товар_5 100x300 ...

внешняя привязка javascript - JavaScript
код html &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt; &lt;html&gt; &lt;head&gt; &lt;meta...

События JS. Привязка к элементу - JavaScript
Если мы устанавливаем обработчик события с помощью elem.addEventListener('click', myFunc, true), то с помощью 3-го параметра мы можем...

1
ntlinuxnt
$ su
1459 / 502 / 71
Регистрация: 18.11.2010
Сообщений: 2,784
Записей в блоге: 2
Завершенные тесты: 5
19.07.2016, 22:33 #2
Посмотрите как раньше реализовывали drug'n'drop и вы все поймете.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
19.07.2016, 22:33
Привет! Вот еще темы с ответами:

Привязка left к input.value - JavaScript
Есть такие элементы. &lt;div id=&quot;qwe1&quot; style=&quot;left: 50%&quot;&gt;&lt;/div&gt; &lt;input type=&quot;text&quot; id=&quot;qwe2&quot; value=&quot;50&quot;&gt; Как написать так, чтобы при...

привязка событие к проигрыванию ролика - JavaScript
Возможно ли привязать событие (ну например появление текста в блоке)к определенной минуте ролика с ютуб, например когда видео-просмотр...

Firefox. Привязка скрипта к вкладке - JavaScript
Создал кнопку, она работает через content.document. Как следствие, при переключении активной вкладки происходит работа уже с новой...

Составить алгоритм определения суммы минимального элемента и первого элемента массива от 1 до 5 на HTML - JavaScript
Составить алгоритм определения суммы минимального элемента и первого элемента массива от 1 до 5 на HTML


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

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

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