1. Сценарии приложения
Div выскакивает мышь и не может быть скрыт сразу после ухода мыши, потому что на этом Div также есть функциональный портал. например:
Эффект отображения карты профиля, когда мышь проходит через аватар друга в списке друзей, заключается в следующем:
Отображать QR -код при падении
2. Реализация
Используйте простой эффект, подобный этим: мышь навсегда отображает B на моделировании
Есть два способа его реализации. Второй рекомендуется. Первый имеет свои недостатки. Я расскажу об этом ниже.
1. Метод 1
Принцип: Поместите триггерный элемент A и отображаемый элемент B в один и тот же родительский элемент, и дисплей B запускается, когда мышь проходит через родительский элемент. Таким образом, когда мышь переходит к B, Div не будет скрыт.
Код:
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> Hover a Show B </title> <script src = "http://code.jquery.com/jquery-1.12.2.min.js"> </scrod> <style-type = "text/css">##### Запас: 10px 0 10px 10px; Ширина: 50px; Высота: 50px; фоновый цвет: #CCC; }#msg-box {border: 1px solid black; Ширина: 200px; Высота: 150px; дисплей: нет; Плавание: осталось; Подготовка: 10px} </style> </head> <body> <div id = "hoverwrap"> <div id = "kroke"> a </div> <div id = "msg-box"> функциональный модуль b </div> </div> <script type = "text/javascript"> $ (#hoverwrap "). $ ("#msg-box"). toggle ();}); </script> </body> </html>Этот метод относительно прост в реализации, но он требует обертывания слоя родительских тегов и имеет недостаток: два элемента не могут быть распределены.
2. Метод 2
Принцип: когда мышь проходит A, B, B выскочивает, выходит на выезд, устанавливает таймер для задержки на 0,5 с, а затем закрывает B, поэтому вам нужно судить при переходе на A. Если есть таймер, сначала очистите таймер, а затем отобразить B.
Когда пользователь покидает A, что запускает событие, div карты данных необходимо отложить на 0,5 секунды перед закрытием. У пользователя достаточно времени, чтобы выполнить соответствующую операцию. Когда мышь перемещается в карту данных B, таймер в B, который ранее был приурочен к закрытию B.
Полный код заключается в следующем:
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> Hover a Show B </title> <script src = "http://code.jquery.com/jquery-1.12.2.min.js"> </scrod> <style-type = "text/css">##### Маржа: 10px; Ширина: 50px; Высота: 50px; фоновый цвет: #CCC; }#msg-box {border: 1px solid black; Ширина: 200px; Высота: 150px; дисплей: нет; Плавание: осталось; Подкладка: 10px} </style> </head> <body> <div id = "chrok"> a </div> <div id = "msg-box"> функциональный модуль b </div> <script type = "text/javascript"> var Timer; $ ("#Hook,#msg-box"). Bind ("mouseover", showmsgbox); $ ("#chrok"). Bind ("maseout", hidemsgbox); $ ("#msg-box"). Bind ("mouseout", function () {if (timer) {cleartimeout (timer);} $ (#msg-box); showmsgbox () {if (timer) {cleartimeout (timer);} $ ("#msg-box"). show ();} function hidemsgbox () {timer = settimeout (function () {$ ("#msg-box"). hide ();}, 500);} </script> </body> </html>;JS Часть:
<script type = "text/javascript"> var timer; $ ("#chrok,#msg-box"). bind ("mouseover", showmsgbox); $ ("#chrok"). bind ("mouseout", hidemsgbox); $ ("#msg-box"). Bind ("moseout", function () {if timer) {cleartime). $ ("#msg-box"). Hide ();Что следует отметить
1. Используйте MouseOver вместо MouseMove, чтобы запустить события.
Mouseover: запускается, когда мышь перемещается по целевому элементу.
MouseMove: мышь продолжает запускать при перемещении внутри элемента.
Следовательно, Mouseover и MouseMove потребляют ресурсы.
Для получения дополнительной информации, пожалуйста, см.
2. объявить это перед вызовом таймера
Если не объявить, таймер не будет объявлен в первый раз, когда мышь будет выдвинут, поэтому будет сообщена ошибка, когда мышь перенесена в первый раз.
3. Таймер должен быть очищен перед вызовом события Mouseover
Если не очистить, B будет автоматически закрыт через 0,5 с.
3. упаковка в универсальную функцию
Учитывая, что эта функция более общая, она упакована. Поскольку JS должен иметь дело с некоторыми проблемами совместимости, он написан в JQUERY.
/*** @description Mouse пугает в Ohook, чтобы отобразить Omsgbox. * @Author liuxiaoyan* @date 2016-03-24 15: 01: 13* @last modied by: liuxiaoyan* @last Modified Time: 2016-03-24 15:01:13* // *** @param Ohook: Элементы на пари* @param omsgbox: элементы, которые будут отображаться на Hover* Вызовите примеры hovershowmsg.init ({kroke: $ (". Viewphone"), msgbox: $ (". ViewPhoneScan")});*/var hovershowmsg = (function () {var Ohook, omsgbox, timer; function init (o) {ohook = o.hook; omsgbox = o.msgbox; bindev () function; Ohook.Bind ({MouseOver: ShowMsgbox, Mouseout: Hidemsgbox}); omsgbox.hide ();Выше приведено полное содержание того, как достичь эффекта отображения информационных карт (рекомендуется) на основе JS на основе QQ Friend Friend Avatar Hover. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение. Редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайта wulin.com!