Основываясь на потребностях проекта, необходимо создать следующий эффект страницы: когда пользователь передает аватар друга в списке друга, отображается основная информация друга, что на самом деле является функцией, аналогичной клиенту QQ.
Я нашел много кодов в Интернете, и в основном все они поняли, что мышь была приостановлена, и DIV появился, а затем исчез сразу после ухода. Есть также некоторые чистые коды CSS, которые достигают этого эффекта, но они бесполезны для меня. Что мне нужно, так это JS (потому что мои данные должны быть получены через Ajax), а мышь не может быть скрыта сразу после ухода. Существует также запись функции в этом Div. Эффект этой страницы бросал меня на день, что показывает, что мои технологии JS и CSS должны быть улучшены ...
После долгого поиска я наконец нашел две возможные идеи следующим образом. Есть пример этих двух методов. Я не писал их, и я тоже их не использовал. Давайте поделимся ими, и демонстрационный адрес отображается. Мой метод относится к идее метода B.
Метод A:
Поместите плавающий Div и триггерный элемент A в один и тот же родительский элемент и запустите дисплей, когда мышь проходит через родительский элемент. Таким образом, когда мышь перемещается в DIV, она все еще находится в родительском элементе, и DIV не будет скрыт.
Метод B:
Div выскочивает, когда мышь проходит. Когда мышь оставляет А, таймер устанавливается, чтобы выключить див. Если мышь перемещается в DIV, таймер очищается.
-
Мой метод принимает идею метода B выше. Когда пользователь покидает изображение, которое запускает событие, DIV карты данных необходимо отложить на 3 секунды, прежде чем оно будет закрыто. У пользователя достаточно времени, чтобы выполнить соответствующую операцию. Когда пользователь нажимает на изображения других друзей, скрытый метод будет немедленно вызван, чтобы закрыть предыдущее открытие и время Div.
Вот код JS для моего метода:
// Показать карту данных var woreid; // Определить функцию глобальной переменной ShowInfocard (thisObj, id) {this.hidden (woreD); // немедленно скрыть предыдущий выбранное div до = id; // alert (id); // var d = $ (thisObj); // var pos = d.offset (); // var t = pos.top + d.height () - 5; // верхняя позиция всплывающей коробки // var l = pos.left - d.width () - 600; // левое положение всплывающего окна // $ ("#"+id) .css ({"top": t, "Left": l}). Show (); // var objdiv = $ ("#"+id); $ (objdiv) .css ("Display", "block"); $ (objdiv) .css ("Left", Event.clientx-280); // x значение всплывающего окна составляет $ (objdiv) .css ("top", event.clienty-10); // Значение y всплывающего окна-значение y vally} function hideinfocard (id) {// скрыть div // задержка на 3 секунды settimeout ('hidden ('+id+')', 3000); } функция Hidden (id) {$ ("#"+id) .hide (); }Вот скрытый фрагмент кода Div в HTML:
<div id = "id" style = "display: none; ширина: 250px; высота: 150px; фоновый цвет:#d1eeee; позиция: абсолют;"> </div>
В HTML вам нужно позвонить в методы Showinfocard и Hideinfocard и прослушать события мыши, используя следующее утверждение:
onmouseover = "showinfocard (this, '$ {rows.friendid}')" onmouseout = "hideinfocard ('$ {rows.friendid}')"Это динамические фрагменты кода. При использовании его необходимо представить фреймворк jQuery.js, и, конечно, он также может быть изменен в чистый JS. Вышеупомянутое завершено. Ajax получает информацию, а затем использует JS для вставки HTML -кода в приведенный выше Div для завершения дисплея. Наконец, у меня есть предварительный рендеринг, что довольно уродливо ...