ampliar la imagen y moverla con el puntero del ratón sobre el

Question

Lo siento si esto puede parecer trivial para que le pregunte, pero ..

tengo algunas imágenes y los necesito para agrandar al desplazar el ratón sobre ellos. Pero ... Quiero que la imagen ampliada se adhiera al puntero a medida que la muevo por la imagen. No sé cómo llamarlo. Estoy bastante seguro de que solo está hecho con javascript, simplemente css no funcionará aquí.

Algo como esto http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/, pero ya sabes, tiene que moverse con el puntero en movimiento.

¿Cuál es la forma más efectiva de hacer esto?

Answer 1

Las respuestas anteriores pueden ser exactamente lo que está buscando, y es posible que ya tengas esto resuelto. Pero observo que no mencionaste jquery en ninguna parte de tu publicación y todas esas respuestas se trataron con eso. Entonces, para una solución JS pura ...

Supongo, por la forma en que se formuló la pregunta, que usted ya sabe cómo hacer estallar la imagen. Esto puede hacerse codificando una etiqueta img oculta posicionada en el html o generada sobre la marcha con JS. El primero puede ser más fácil si eres un principiante de JS. En los ejemplos voy a suponer que usted hizo algo similar a lo siguiente:

<img src="" id="bigImg" style="position:absolute; display:none; visibility:hidden;"> 

Luego hay una función onMouseOver de la uña del pulgar.Esta función debe hacer tres cosas:

1) Cargar el archivo de imagen real en la imagen oculta

//I'll leave it up to you to get the right image in there. 
document.getElementById('bigImg').src = xxxxxxxx; 

2) Coloque la imagen oculta

//See below for what to put in place of the xxxx's here. 
document.getElementById('bigImg').style.top = xxxxxxxx; 
document.getElementById('bigImg').style.left = xxxxxxxx; 

3) Hacer que la imagen oculta aparece

document.getElementById('bigImg').style.display = 'block'; 
document.getElementById('bigImg').style.visibility = 'visible'; 

Luego tendrá que capturar el evento onMouseMove y actualizar la imagen ahora no oculta e, la posición en consecuencia utilizando el mismo código que habría utilizado en (2) arriba para colocar la imagen. Esto sería algo como lo siguiente:

//Get the mouse position on IE and standards compliant browsers. 
if (!e) var e = window.event; 
if (e.pageX || e.pageY) { 
    var curCursorX = e.pageX; 
    var curCursorY = e.pageY; 
} else { 
    var curCursorX = e.clientX + document.body.scrollLeft; 
    var curCursorY = e.clientY + document.body.scrollTop; 
} 
document.getElementById('bigImg').style.top = curCursorY + 1; 
document.getElementById('bigImg').style.left = curCursorX + 1; 

Y eso debería hacerlo. Simplemente agregue un evento onMouseOut para ocultar la imagen bigImg nuevamente. Puede cambiar el "+1" en las últimas dos líneas a lo que quiera para colocar la imagen correctamente en relación con el cursor.

Tenga en cuenta que todo el código anterior es sólo para fines de demostración; No he probado nada de eso, pero debería llevarte por el buen camino. Es posible que desee ampliar más esta idea precargando las imágenes más grandes. También podría renunciar a capturar eventos mousemove utilizando setTimeout para actualizar la posición cada 20 ms más o menos, aunque creo que ese enfoque es más complicado y menos deseable. Solo lo menciono porque algunos desarrolladores (incluyéndome cuando comencé) tienen una aversión al manejo de eventos JS.

Hice algo similar a esto con una etiqueta ColdFusion personalizada que escribí que generaría un usuario de div flotante que podría hacer clic y arrastrar por la pantalla. Mismo principio. Si me necesitas, puedo profundizar en eso para responder más preguntas con más profundidad.

¡Buena suerte!

Answer 2

Prueba esto enlaza [jquery with auto positioning]

1.Simple

http://jquery.bassistance.de/tooltip/demo/

2.Bien con foro

http://flowplayer.org/tools/tooltip/index.html

Answer 3

si entendía a corregir Si desea posicionar su imagen grande en relación con el cursor. Una solución de jQuery (no estoy seguro al 100% del código de aquí, pero la lógica es que hay):

$('.thumb').hover(function(e){ 
    var relativeX = e.pageX - 100; 
    var relativeY = e.pageY - 100; 

    $(.image).css("top", relativeY); 
    $(.image).css("left", relativeX); 
    $(.image).show(); 
}, function(){ 
    $(.image).hide(); 
    }) 

Answer 4

solución de Liece está cerca, pero no logrará el efecto deseado de la imagen grande tras el cursor .

he aquí una solución en jQuery:

$(document).ready(function() { 
    $("img.small").hover (function() { 
     $("img.large").show(); 
    }, function() { 
     $("img.large").hide(); 
    }); 

    $("img.small").mousemove(function(e) { 
     $("img.large").css("top",e.pageY + 5); 
     $("img.large").css("left",e.pageX + 5); 
    }); 
    }); 

El HTML es:

<img class="small" src="fu.jpg"> 
<img class="large" src="bar.jpg"> 

CSS:

img { position: absolute; } 

Answer 5

Jquery es la ruta más fácil. la posición absoluta es la clave.

Answer 6

^Además de lo anterior, aquí hay un violín JS que funciona. Visite: jsfiddle.net/hdwZ8/1/

Se ha editado de forma aproximada, por lo que no se usa solo etiquetas IMG css generales, fáciles de usar para cualquiera ahora.

Estoy usando esta secuencia de comandos en lugar de Lightbox en mi sitio de cliente de Wordpress, una imagen de acercamiento rápido con el mouse sobre es mucho mejor IMO. ¡Es muy fácil crear galerías eficientes especialmente con el complemento AdvancedCustomFields & en los bucles de repetición WP PHP!