1. Escenarios de aplicación
El Div aparece el ratón rondado y no puede ocultarse inmediatamente después de que el mouse se va, porque también hay un portal de funciones en este div. Por ejemplo:
El efecto de mostrar la tarjeta de perfil cuando el mouse pasa a través del avatar del amigo en la lista de amigos es el siguiente:
Muestra el código QR cuando se desplaza
2. Realización
Use un efecto simple como este: el ratón se desplaza para mostrar B en A para simular
Hay dos formas de implementarlo. Se recomienda el segundo. El primero tiene sus desventajas. Hablaré de eso a continuación.
1. Método 1
Principio: Coloque el elemento de activación A y el elemento mostrado B en el mismo elemento principal, y la pantalla B se activa cuando el mouse pasa a través del elemento principal. De esta manera, cuando el mouse se mueve a B, el DIV no estará oculto.
Código:
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> hover a show b </title> <script src = "http://code.jquery.com/jquery-1.12.22.min.js"> </script> <style type = "text/css">#gancho {float: izquierda; margen: 10px 0 10px 10px; Ancho: 50px; Altura: 50px; Color de fondo: #CCC; }#msg-box {border: 1px sólido negro; Ancho: 200px; Altura: 150px; Pantalla: ninguno; flotante: izquierda; Relmo: 10px} </style> </head> <body> <div id = "Hoverwrap"> <div id = "gancho"> a </div> <div id = "msg-box"> módulo de función b </div> </div> <script type = "text/javascript"> $ ("#Hoverwrap"). Hover (function () {) $ ("#msg-box"). toggle ();}); </script> </body> </html>Este método es relativamente simple de implementar, pero requiere envolver una capa de etiquetas parentales y tiene una desventaja: los dos elementos no se pueden espaciar.
2. Método 2
Principio: cuando el mouse pasa A, B aparece, se mueve a A, establece un temporizador para retrasar en 0.5s y luego cierra B, por lo que debe juzgar al mudarse a A. Si hay un temporizador, borre el temporizador primero y muestre B.
Cuando el usuario deja A, lo que desencadena el evento, la tarjeta de datos DIV debe retrasarse en 0.5 segundos antes de cerrar. El usuario tiene suficiente tiempo para realizar la operación correspondiente. Cuando el mouse se mueve a la tarjeta de datos B, el temporizador en B que anteriormente se programó para cerrar B.
El código completo es el siguiente:
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> hover a show b </title> <script src = "http://code.jquery.com/jquery-1.12.22.min.js"> </script> <style type = "text/css">#gancho {float: izquierda; margen: 10px; Ancho: 50px; Altura: 50px; Color de fondo: #CCC; }#msg-box {border: 1px sólido negro; Ancho: 200px; Altura: 150px; Pantalla: ninguno; flotante: izquierda; relleno: 10px} </style> </head> <body> <div id = "gancho"> a </div> <div id = "msg-box"> módulo de función b </div> <script type = "text/javaScript> var temporizador; $ ("#gancho,#msg-box"). bind ("mouseover", showmsgbox); $ ("#gancho"). bind ("mouseout", hidemsgbox); $ ("#msg-box"). bind ("mouseout", function () {if (temporizador) {cleartimeOut (temporizador);} $ ("#msg-box"). showmsgbox () {if (timer) {cleartimeout (timer);} $ ("#msg-box"). show ();} function hidemsgbox () {timer = setTimeOut (function () {$ ("#msg-box"). hide ();}, 500);} </script> </body> </hml>JS PARTE:
<script type = "text/javascript"> var timer; $ ("#gancho,#msg-box"). bind ("mouseover", showmsgbox); $ ("#gancho"). bind ("mouseout", hidemsgbox); $ ("#msg-box"). bind ("rouseout", function () {if (timer) {timeout (tiempo temporal);};};} $ ("#msg-box"). hide ();}); function showmsgbox () {if (timer) {cleartimeout (timer);} $ ("#msg-box"). show ();} function hidemsgbox () {timer = setTimeOut (function () {$ ("#msg-box"). HidE ();}, 500);Cosas a tener en cuenta
1. Use MouseOver en lugar de MouseMove para activar eventos.
MouseOver: activado cuando el mouse se mueve sobre el elemento objetivo.
MouseMove: el mouse sigue activando al moverse dentro del elemento.
Por lo tanto, Mouseover y MouseMove consumen recursos.
Para obtener más información, consulte: http://www.cnblogs.com/starof/p/4106904.html
2. Declarlo antes de llamar al temporizador
Si no se declara, el temporizador no se declarará la primera vez que se mueva el mouse, por lo que se informará un error cuando el mouse se mueva por primera vez.
3. El temporizador debe eliminarse antes de llamar al evento de Mouseover
Si no se borra, B se cerrará automáticamente después de 0.5s.
3. Empaque en una función universal
Teniendo en cuenta que esta función es más general, está empaquetada. Debido a que JS necesita lidiar con algunos problemas de compatibilidad, está escrito en jQuery.
/*** @Description Mouse Hover a Ohook para mostrar OMSGBox. * @Author liuxiaoyan* @Date 2016-03-24 15: 01: 13* @last modificado por: liuxiaoyan* @last tiempo modificado: 2016-03-24 15:01:13* // *** @param ohook: elementos a hover* @param omsgBox: elementos que se mostrarán en Hover* Ejemplo de llamada: HoverShowmsg.init ({Hook: $ (". ViewPhone"), msgbox: $ (". Ohook.bind ({mouseover: showmsgbox, mouseout: hidemsgbox}); OMSGBOX.HIDE ();Lo anterior es el contenido completo de cómo lograr el efecto de mostrar tarjetas de información (recomendadas) basadas en JS basado en QQ Friend Avatar Hover. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje. El editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!