Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Сергей Мишин
0 / 0 / 1
Регистрация: 19.07.2016
Сообщений: 115
Завершенные тесты: 1
#1

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

19.07.2016, 20:04. Просмотров 788. Ответов 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
Привязка элемента к курсору
див который появляется после наведения
Привязка элемента к курсору
после двойного клика
Привязка элемента к курсору
http://www.cyberforum.ru/javascript/thread261902.html
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.07.2016, 20:04
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Привязка элемента к курсору (JavaScript):

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

Привязка контекста к {}
Можно привязать контекст к объекту? var obj1 = { prop: 1, ...

События JS. Привязка к элементу
Если мы устанавливаем обработчик события с помощью...

Внешняя привязка javascript
код html &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;...

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

1
ntlinuxnt
$ su
1597 / 512 / 97
Регистрация: 18.11.2010
Сообщений: 2,805
Записей в блоге: 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
Есть такие элементы. &lt;div id=&quot;qwe1&quot; style=&quot;left: 50%&quot;&gt;&lt;/div&gt; &lt;input...

Привязка значений в полях
Есть товары на сайте, называются по такому типу Товар_1 100x100 Товар_2...

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

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


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

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

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