Es el fin de semana, es hora de resumir mañana. Siento que he aprendido algunas cosas, pero siento que no he aprendido mucho. Analicémoslo mañana. Echemos un vistazo a los problemas que quiero analizar hoy.
Todos están familiarizados con esta imagen:
"..... ... ...
Hoy lo analizaremos y lo crearemos. Primero presentemos las características de este cuadro emergente:
* Siempre adjunto al borde de la página
* No cambie la posición a medida que la página aumenta y disminuye
* Cuando el mouse pase, aparecerá información detallada, y cuando se vaya, volverá a su estado original.
De esta manera, podemos pensar aproximadamente en varias funciones posibles: posicionamiento absoluto de la publicación; monitoreo y métodos del ratón que pasa; Definitivamente se utilizarán, pero ¿cuáles son los otros usos además de estos y cómo se implementan?
1. Implementar todo el estado de la interfaz mostrada
Escribir el código HTML primero
La copia del código es la siguiente:
<span style = "font-size: 12px;"> <div id = "shareleft">
<div>
<p> <a href = "#"> Tip </a> </p>
</div>
<p id = "mainmsg" onMouseOver = "showTip ()">
Compartir a
</p>
</div> </span>
Entonces la codificación de estilo CSS
La copia del código es la siguiente:
<span style = "font-size: 12px;">*{margen: 0; relleno: 0;}
#shareleft {posición: fijo; color de fondo: amarillo; arriba: 50px; ancho: 300px; altura: 600px; derecha: 0px;}
#mainmsg {color: #fff; posición: Absolute; cursor: pointer; text-align: centro; fondo de fondo: rojo; arriba: 60px; ancho: 100px; altura: 400px; relleno: 20px 0 0 10px; margen-margen: -100px; border-radio: 50px 0 0 50px; }
.list {float: right; background-color: #fff; ancho: 280px; altura: 580px; margen: 10px 10px 10px 10px;} </span>
Analicemos los puntos clave aquí: a. Publicación: la posición fija es muy buena; b. Derecho: 0px, la aplicación específica de esto se explicará en detalle más adelante, pero también es muy importante aquí; 3. #Mainmsg margin -izquierda: -100px, este lugar también es muy importante, así que echemos un vistazo al efecto
Jaja, esta es la caja emergente más grande del año. Sigamos hablando sobre el efecto emergente de JS
2. Oculta la parte detallada, lo que provoca que la parte se filtre afuera
Esto es relativamente simple. Para modificarlo, simplemente cambie el valor correcto de Shareleft, derecho = -300px, que es el ancho del DIV
3. JS para lograr el efecto emergente
Esta no es la primera vez que hemos usado el efecto de este temporizador. Lo hemos aplicado al implementar el efecto de máquina de escribir por JS., Aquí acabamos de cambiar el objeto de tiempo.
La copia del código es la siguiente:
<span style = "font-size: 12px;"> <script type = "text/javaScript">
VAR TIMER = NULL;
Var Count = 0;
var tip = function (posición, objetivo, velocidad) {
ClearInterval (temporizador);
timer = setInterval (function () {
if (Count> Position.OffSetWidth) {
ClearInterval (temporizador);
}demás{
posicion.style.right+= window.count+"px";
Window.Count ++;
};
}, velocidad);
};
función showTip () {
VAR POSICIÓN = Document.getElementById ("shareleft");
consejo (posición, document.body.clientwidth, 1000);
};
</script> </span>
Los puntos más importantes a los que prestar atención en este código son: OffsetWidth, .Style.Right, etc. No hablaré de esto por ahora. Lo presentaré específicamente. Usémoslo así primero, solo conozca el significado.
Después de comprender esto a fondo, el efecto se logrará ahora, por lo que también puede probarlo.