-
Cómo crear un cristal efecto amplificador en una página web
-
Dando a los visitantes a su página Web la oportunidad de echar un vistazo más de cerca a una imagen requiere un poco de manipulación de imágenes detrás de las escenas. Mediante la adición de un poco de CSS, JavaScript y jQuery a la mezcla puede crear el efecto de una lupa como puntero del ratón sobre una imagen en su página. Este efecto se logra mediante la creación de una pequeña ventana que muestra la imagen de fondo cuando el puntero del ratón se mueve sobre la imagen que aparece en el primer plano.Instrucciones
1 Incluir JavaScript y jQuery en la sección "cabeza" de su código HTML con las declaraciones:
<Script type = "text / javascript" src = "jquery.js"> </ script>
<Script type = "text / javascript"> </ script>En este ejemplo, la biblioteca jQuery se encuentra en el directorio predeterminado de HTML.
2 Insertar una etiqueta CDATA para evitar intentos de tu navegador para analizar los operadores de jQuery:
<! [CDATA [
3 Definir las variables altura y anchura usadas para mostrar dos imágenes:
var = 743 W;
var H = 1,155;
var w = 192;
var h = 300;4 Establecer las condiciones que activan la función de ampliación. Cuando se le llama, esta función reemplaza el puntero del ratón con una pantalla circular de la imagen subyacente más grande cuando el usuario pasa el puntero del ratón sobre la imagen más pequeña que aparece en la página. Cree este evento con el código:
$ (Document) ready (function () {
$ ( "# Myimage"). Mouseover (function (e) {
$ (Document) .mousemove (myMM);
$ ( "# Cristal") fadeIn ( "rápido").;
});});
5 Definir parámetros de la pantalla y que se acaban de la función de ampliación. En este ejemplo, la imagen oculta se ve magnificado por dos veces el tamaño de la imagen más pequeña y la ventana de ampliación desaparece cuando el puntero del ratón se mueve fuera de los límites de la imagen más pequeña. Usted puede hacer esto con el código:
función myMM (e) {
var myImage = $ ( "# myimage");
var glassImage = $ ( "# vidrio-imagen");
var vidrio = $ ( "# cristal");
var x = e.pageX - myImage.offset () izquierdo;.
var ys = e.pageY - myImage.offset () superior.;
var = bx glassImage.width () / 2 - xW / w;
var por glassImage.height = () / 2 - H ys / h;
glass.css ( "izquierda", e.pageX-75-89 + "px") CSS ( "top", e.pageY-75-10 + "px.");
glassImage.css ( "background-position", bx + "px" + by + "px");
si (BX <-W || por <-H || bx> 150 || por> 150) {
myImage.unbind ( 'mousemove', myMM);
glass.fadeOut ( "rápido");
}
}6 Cierre la escritura de jQuery y CDATA exclusión analizador con los estados:
//]]>
</ Script>7 Fije su diseño de página CSS para posicionar los límites de la imagen de fondo y la ventana de ampliación más grandes con el código:
<Style type = "text / css">
monaimage {
margin-left: 200px;
}vaso {
background-repeat: no-repeat;
background-position: arriba a la izquierda;
Anchura: 250px;
altura: 170px;
padding-top: 10px;
padding-left: 89px;
margin: 0;
position: absolute;
display: none;
}vidrio imagen {
Imagen de fondo: url ( 'myImageLarge.jpg');
Anchura: 150px;
altura: 150px;
la frontera de radio: 75px;
-moz-border-radius: 75px;
background-repeat: no-repeat;
background-color: #fff;
margin: 0;
padding: 0;
cursor: ninguno;
}
</ Style>
</ Head>8 Escribir el código HTML para mostrar su página en la sección "cuerpo":
<Body>
<P> Mover el cursor sobre la imagen </ p>
<Img id = "myimage" title = "Ampliación Ejemplo" src = "myimageSmall.jpg" alt = "The Big Picture" />
<Div id = "cristal"> <div id = "cristal-imagen"> </ div> </ div></ Body>
</ Html>
Consejos y advertencias
- Este código se basa en CSS3 para crear un campo de ampliación redonda y puede no funcionar en navegadores antiguos. Por razones de compatibilidad con las implementaciones de CSS mayores, definir un campo rectangular para "# vidrio-imagen".
- Sin las etiquetas CDATA, los navegadores tratan de analizar el menor que "<" y mayor que ">" operadores como etiquetas HTML. Siempre rodear operadores JavaScript y jQuery con las etiquetas CDATA para evitar el fracaso de la escritura.
