1. Cenários de aplicação
A div aparafusa o mouse pairando e não pode ser escondida imediatamente após as folhas do mouse, porque também há um portal de função nessa div. por exemplo:
O efeito de exibir o cartão de perfil quando o mouse passa pelo avatar do amigo na lista de amigos é o seguinte:
Exiba o código QR quando o mouse
2. Realização
Use um efeito simples como este: o mouse pairar para exibir B em A para simular
Existem duas maneiras de implementá -lo. O segundo é recomendado. O primeiro tem suas desvantagens. Vou falar sobre isso abaixo.
1. Método 1
Princípio: Coloque o elemento gatilho A e o elemento B exibido no mesmo elemento pai e a tela B é acionada quando o mouse passa pelo elemento pai. Dessa forma, quando o mouse se mover para B, a div não estará oculta.
Código:
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> Passe um show b </title> <script src = "http://code.jquery.com/jquery-1.12.min.js"> </script> <estilo = "" margem: 10px 0 10px 10px; Largura: 50px; Altura: 50px; Background-Color: #CCC; }#msg-box {borda: 1px Solid Black; Largura: 200px; Altura: 150px; Exibir: Nenhum; flutuar: esquerda; preenchimento: 10px} </style> </head> <body> <div id = "hoverwrap"> <div id = "Hook"> a </div> <div id = "msg-box"> função módulo b </div> </div> <script type = "text/javascript"> ("#hoverwrap"). $ ("#msg-box"). Toggle ();}); </script> </body> </html>Esse método é relativamente simples de implementar, mas requer envolver uma camada de etiquetas parentais e tem uma desvantagem: os dois elementos não podem ser espaçados.
2. Método 2
Princípio: Quando o mouse passa A, B aparece, move uma saída, define um cronômetro para atrasar em 0,5s e depois fecha B, então você precisa julgar ao se mudar para A. Se houver um cronômetro, limpe o cronômetro primeiro e depois exiba B.
Quando o usuário sai de A, que aciona o evento, o Data Card Div precisa ser adiado em 0,5 segundos antes de fechar. O usuário tem tempo suficiente para executar a operação correspondente. Quando o mouse se move para o cartão de dados B, o temporizador em B que foi cronometrado anteriormente para fechar B.
O código completo é o seguinte:
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> Passe um show b </title> <script src = "http://code.jquery.com/jquery-1.12.min.js"> </script> <estilo = "" margem: 10px; Largura: 50px; Altura: 50px; Background-Color: #CCC; }#msg-box {borda: 1px Solid Black; Largura: 200px; Altura: 150px; Exibir: Nenhum; flutuar: esquerda; preenchimento: 10px} </style> </ad Head> <body> <div id = "Hook"> a </div> <div id = "msg-box"> Módulo de função b </div> <script type = "text/javascript"> var " Timer; $ ("#gancho,#msg-box"). bind ("mouseover", showmsgbox); $ ("#gancho"). bind ("mouseout", hidemsgbox); $ ("#msg-box"). bind ("mouseout", function () {if (timer) {clearTimeout (timer); ShowMSGBox () {if (Timer) {ClearTimeout (Timer);} $ ("#msg-box"). Show ();} função hidemsgbox () {timer = setTimeout (function () {$ ("#msg-box"). hide ();}, 500);Parte do JS:
<script type = "text/javascript"> var timer; $ ("#gancho,#msg-box"). bind ("mouseOver", showmsgbox); $ ("#gancho"). bind ("mouseout", hidemsgbox); $ ("#msg-box"). $ ("#msg-box"). hide ();Coisas a serem observadas
1. Use MouseOver em vez de MouseMove para desencadear eventos.
MouseOver: acionado quando o mouse se move sobre o elemento de destino.
MouseMove: O mouse continua desencadeando ao se mover para dentro do elemento.
Portanto, MouseOver e Mousemove consomem recursos.
Para mais informações, consulte: http://www.cnblogs.com/starof/p/4106904.html
2. Declare -o antes de ligar para o temporizador
Se não for declarado, o cronômetro não será declarado na primeira vez que o mouse for retirado, portanto, um erro será relatado quando o mouse for movido pela primeira vez.
3. O timer deve ser limpo antes de chamar o evento MouseOver
Se não for liberado, B será fechado automaticamente após 0,5s.
3. Pacote em uma função universal
Considerando que essa função é mais geral, ela é embalada. Como o JS precisa lidar com alguns problemas de compatibilidade, ele está escrito no jQuery.
/*** @Description Mouse Passe o Ohook para exibir OMSGBox. * @Author Liuxiaoyan* @Date 2016-03-24 15: 01: 13* @LAST Modificado por: Liuxiaoyan* @Last Horário modificado: 2016-03-24 15:01:13* // *** @param ohook: elementos para percorrer* @param omsgbox: elementos a serem exibidos no salto* hovershowmsg.init ({gancho: $ (". Viewphone"), msgBox: $ (". ViewphonesCan")});*/var hoversHowmsg = (function () {var ohook, omsgbox, timer; function init (o) {ohook = o.Hook; omsgbox = O.MSGBox; Ohook.bind ({mouseOver: showmsgbox, mouseout: hidemsgbox}); omsgbox.hide ();O exposto acima é o conteúdo completo de como alcançar o efeito da exibição de cartões de informação (recomendados) com base no JS com base no pau do QQ Friend Avatar. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem. O editor responderá a tempo. Muito obrigado pelo seu apoio ao site wulin.com!