Quiero tener una foto en un sitio, y cuando muevo el mouse, quiero un pequeño efecto de zoom de lupa.html acercar el mouse sobre
¿Puedo hacer esto en html con lienzo o algo así? javascript tal vez?
agradecimiento
lienzo no es compatible con IE y sin terceros plug-ins. Querrá hacer esto en JavaScript. jQuery lo hace muy fácil y limpio. Vincula los manejadores para los eventos de entrada/salida del elemento de imagen que deseas ampliar usando .hover(). "Manejadores de encuadernación" simplemente significa que pasa dos funciones a .hover() que se ejecutará cuando el usuario entra y sale, respectivamente. Estas funciones utilizarán animate(), que puede simplemente pasar un nuevo tamaño.
Eche un vistazo a la documentación para .animate() y .hover(). Si es totalmente nuevo en jQuery, check out the tutorials.
Puede mostrar la imagen en un div como una imagen de fondo y cambiar la posición con un poco de Javascript.
Aquí hay una biblioteca con algunos ejemplos: http://www.mind-projects.it/projects/jqzoom/demos.php
Creo que he encontrado lo que quiere: loupe.js. Por lo que he visto, es uno de los mejores efectos lupa/lupa.
Encierre su foto en un div y agregue Zoom a través de CSS al pasar el mouse. Es posible que desee aumentar el índice z al pasar el mouse. Puede agregar al siguiente CSS para mejorar el aspecto/estilo de la foto ampliada. Si no quieres reinventar la rueda, busca algún plugin de Jquery que pueda lograr lo mismo de una manera elegante con menos esfuerzo.
CSS:
#div-1 {
position: absolute;
}
#div-1.hover {
position: absolute; zoom: 70%; border: solid 1px; z-index:10;
}
Jquery/Javascript:
<script type = "text/javascript">
$(document).ready(function() {
$(".div-1").onmouseover(function() {
toggle_visibility('div-1');
})
function toggle_visibility(id) {
var e = document.getElementById(id);
if ($(e).hasClass("hover")) {
$(e).removeClass("hover");
} else {
$($(e)).addClass("hover");
$($(e)).attr({
width: "100%",
height: "100%"
});
}
}}); < /script>
he encontrado algunas ejemplo relativo, por lo que visitar estos:
Si bien los enlaces que proporcionó pueden responder a la pregunta, es mejor colocar las partes esenciales de su solución directamente en la respuesta en caso de que los enlaces caduquen en el futuro. – Kmeixner
nice! ¡Gracias! . – pvinis
¿cómo se podría hacer circular el área de acercamiento usando jQZoom? – codecowboy
@codecowboy: He escrito una respuesta aquí: http://stackoverflow.com/questions/5856381/how-can-i-customise-jquery-loupe-to-have-a-circular-lens/5856594#5856594 – Wolph