Desde que comencé a aprender el front-end, generalmente veo algunos controles sobresalientes en el navegador que quiero implementar o (∩_∩) o por mí mismo. Me pregunto si tienes este sentimiento. A continuación, compartiré contigo uno. El control original proviene de la parte inferior derecha de la traducción de Baidu. Puede encontrarlo cuidadosamente, como se muestra en la figura:
Se siente bastante interesante, no complicado de implementar, y es más adecuado para practicar. Ok, no hablemos mucho, solo suba el código.
Código HTML:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = 'utf-8'/>
<title> zoom </title>
<link rel = "stylesheet" type = "text/css" href = "zoom.css"/>
</ablo>
<Body Onload = "Zoom ()">
<div id = 'zoom'>
<span title = "share ..."> </span>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<script type = "text/javaScript" src = "zoom.js"> </script>
</body>
</html>
Código CSS:
La copia del código es la siguiente:
*{
margen: 0px;
relleno: 0px;
}
#zoom{
Posición: Absoluto;
Arriba: 20px;
Derecho: 200px;
borde: 1px sólido RGB (38,147,255);
Altura: 40px;
Ancho: 40px;
}
#zoom> span {
Pantalla: bloque en línea;
Posición: Absoluto;
arriba: 0px;
Abajo: 0px;
Izquierda: 0px;
Ancho: 40px;
IMAGEN DE ACTUESS: URL (sprite.png);
Background-Repeat: sin repetición;
Posición de fondo: -5px -7px;
Opacidad: 0.8;
Filtro: alfa (opacidad = 50);/*ie78*/
}
#zoom ul {
Pantalla: ninguno;
Posición: Absoluto;
arriba: 0px;
Abajo: 0px;
Izquierda: 50px;
Estilo de lista: Ninguno;
}
#zoom ul li {
Pantalla: bloque en línea;
*Display: Inline;/*IE7*/
*Zoom: 1;/*ie7*/
*Margen izquierdo: 5px;/*ie7*/
Ancho: 16px;
Altura: 16px;
margen-top: 12px;
IMAGEN DE ACTUESS: URL (sprite.png);
Background-Repeat: sin repetición;
}
#zoom .li1 {
Posición de fondo: -57px -20px;
}
#zoom .li2 {
Posición de fondo: -77px -20px;
}
#zoom .li3 {
Posición de fondo: -98px -20px;
}
#zoom .li4 {
Posición de fondo: -119px -20px;
}
#zoom .li5 {
Posición de fondo: -140px -20px;
}
#zoom .li6 {
Posición de fondo: -161px -20px;
}
#zoom .li7 {
Posición de fondo: -182px -20px;
}
#zoom .li8 {
Posición de fondo: -203px -20px;
}
#zoom li: hover {
cursor: puntero;
Opacidad: 0.8;
Filtro: alfa (opacidad = 50);/*ie78*/
}
#Zoom Span: Hover {
cursor: puntero;
Opacidad: 1;
Filtro: alfa (opacidad = 100);/*ie78*/
}
Código JS:
La copia del código es la siguiente:
var zoom = (function () {
var zoomdom = document.getElementById ('zoom'),
state = {abierto: false, onaction: false, longitud: 0},
showspan,
ul;
if (zoomDom.FirstelementChild) {
showspan = zoomdom.FirstelementChild;
ul = showspan.nextelementible;
} else { /*ie* /
showspan = zoomdom.firstchild;
ul = showspan.nextsibling;
}
/*Método de evento de registro compatible con IE78*/
var addEvent = function (el, eventType, eventHandler) {
if (el.addeventListener) {
el.addeventListener (eventtype, eventHandler, falso);
} else if (el.attachevent) {
el.attachevent ('on' + eventtype, eventHandler);/*ie78*/
}
};
/*Método de bloqueo de eventos predeterminado compatible con IE*/
var stopDefault = function (e) {
if (e && e.preventDefault) {
E.PreventDefault ();
} demás {
window.event.returnValue = false;/*es decir*/
}
};
/*Expandir el control*/
var ontoopen = function () {
if (state.length> 250) {
ul.style.display = 'Inline-Block';
state.onaction = false; state.opeled = verdadero;
}demás{
if (! state.onaction) {state.onaction = true;}
state.length += 10;
zoomdom.style.width = state.length + 'px';
SetTimeOut (Onopen, 0)
}
};
/*Cierre el control*/
var oncollapse = function () {
if (state.length <41) {
state.onaction = false; state.opeled = false;
}demás{
if (! state.onaction) {state.onaction = true;}
Estado.length -= 10;
zoomdom.style.width = state.length + 'px';
setTimeout (OnCollapse, 0);
}
};
/*Haga clic en la devolución de llamada del botón de activación*/
var onspanclick = function (e) {
stopDefault (e);
if (! state.onaction) {
if (! state.opened) {
onopen ();
}demás{
ul.style.display = 'Ninguno';
oncollapse ();
}
}
};
Función de retorno () {
addEvent (showspan, 'hacer clic', onspanclick);
};
}) ();
La siguiente imagen es la imagen utilizada en CSS (imagen ^ _ ^ directamente de la traducción de Baidu):
Todos, simplemente cambien el nombre y póngalo en el directorio de la raíz, o coloque directamente dos lugares en el CSS:
La copia del código es la siguiente:
IMAGEN DE ACTUESS: URL (sprite.png);
Cambio a:
La copia del código es la siguiente:
Background-Image: URL (http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);
También está bien usar el recurso de imagen que cargué directamente (gracias a la poderosa Internet^_^).
El siguiente es el efecto que logré:
Hablemos de mis principales puntos técnicos durante el proceso de escritura:
El control es compatible con IE7, y no hay IE6 disponible, por lo que no se puede probar. Los principales problemas de compatibilidad resueltos están marcados en el código.
Con el uso de la tecnología CSS Sprites, debería haberlo descubierto ^_ ^, se debe utilizar una buena tecnología.
Aplicar cierres en JS para evitar la contaminación global.
En la etiqueta de script HTML, también notaré este pequeño detalle (aunque todos son recursos locales ()).
Bueno, eso es todo, pero este pequeño control todavía tiene espacio para una mejora adicional. Por ejemplo, puede usar el atributo CSS3 para lograr una escala dinámica de DIV, puede componizar este control y usar el marco JQ para implementarlo más convenientemente (JQ Practice), etc.
Lo anterior es todo el contenido compartido por este artículo, espero que les guste.