Este efecto no es difícil. El punto clave es establecer la posición y la proporción.
Capture la posición del mouse, determine el área de posición del mouse y el evento onmouseover, evento onmousemove, evento onmouseout
Establezca la proporción para mostrar la imagen grande. La proporción de la imagen cortada que se muestra en la imagen pequeña debe ser precisa, preferiblemente 2 o 4 veces.
Preste atención principalmente al ancho. La imagen m.jpg que tengo aquí es 1440X900....
Copie el código de código de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8">
<title>Efecto lupa</title>
<tipo de estilo="texto/css">
*{margen:0;relleno:0;}
#smallimg{ancho:360px;float:izquierda;posición:relativa;borde:1px rojo sólido;}
#smallimg img{ancho:360px;}
#bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px solid #ccc;display:none;}
#showimg{ancho:100px;alto:100px;fondo:#fff;cursor:move;posición:absoluta;borde:1px sólido #666;opacidad:0.5;filtro:alfa(opacidad=50);display:none;}
</estilo>
</cabeza>
<cuerpo>
<div id="smallimg">
<img src="jq/m.jpg"/>
<div id="showimg"></div>
</div>
<div id="bigimg"></div>
<tipo de script="texto/javascript">
var $=función(id){tipo de retorno de id=="cadena"?document.getElementById(id):id}
var pequeñoimg = $("pequeñoimg");
var showimg = $("showimg");//Filtrar imagen
var bigimg = $("bigimg");
var small_url = smallimg.getElementsByTagName("img")[0].getAttribute("src");
var show_half = maxWidth = maxHeight = 0;
smallimg.onmouseover = función(){
showimg.style.display = "bloquear";
bigimg.style.display = "en línea";
show_half = showimg.offsetHeight/2;
maxWidth = smallimg.clientWidth - showimg.offsetWidth;
maxHeight = smallimg.clientHeight - showimg.offsetHeight;
// Las dos variables anteriores indican el área donde se permite que showimg esté activo.
};
smallimg.onmousemove = función(e){
var e=ventana.evento?ventana.evento:e;
var num=bigimg.clientWidth/showimg.clientWidth;
var Arriba = e.clientY - smallimg.offsetTop - show_half;
var Izquierda = e.clientX - smallimg.offsetLeft - show_half;
//El método de cálculo para obtener la posición de visualización actualmente movida son las coordenadas del mouse - las coordenadas del contenedor más externo - el ancho (alto) del cuadro/2
Arriba = Arriba<0?0:Arriba>maxHeight?maxHeight:Arriba;
Izquierda = Izquierda<0?0:Izquierda>maxWidth?maxWidth:Izquierda;
showimg.style.top = Arriba + "px";
showimg.style.left = Izquierda + "px";
bigimg.style.background = "url("+small_url+") -"+Left*num+"px -"+Top*num+"px no-repeat";
};
smallimg.onmouseout = función(){
showimg.style.display="ninguno";
bigimg.style.background="";
bigimg.style.display="ninguno"
};
</script>
</cuerpo>
</html>