Cet effet n'est pas difficile. La clé est de définir la position et la proportion.
Capturez la position de la souris, déterminez la zone de position de la souris et l'événement onmouseover, l'événement onmousemove, l'événement onmouseout
Définissez la proportion de la grande image. La proportion de l'image coupée affichée sur la petite image doit être précise, de préférence 2 fois ou 4 fois.
Faites surtout attention à la largeur. La photo m.jpg que j'ai ici est de 1440X900....
Copiez le code comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<méta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Effet loupe</title>
<style type="text/css">
*{marge:0;padding:0;}
#smallimg{width:360px;float:left;position:relative;border:1px solid red;}
#smallimg img{largeur:360px;}
#bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px solid #ccc;display:none;}
#showimg{largeur:100px;hauteur:100px;arrière-plan:#fff;curseur:déplacement;position:absolue;bordure:1px solide #666;opacité:0,5;filtre:alpha(opacité=50);affichage:aucun;}
</style>
</tête>
<corps>
<div id="smallimg">
<img src="jq/m.jpg"/>
<div id="showimg"></div>
</div>
<div id="bigimg"></div>
<script type="text/javascript">
var $=function(id){return typeof id=="string"?document.getElementById(id):id}
var smallimg = $("smallimg");
var showimg = $("showimg");//Filtrer l'image
var bigimg = $("bigimg");
var small_url = smallimg.getElementsByTagName("img")[0].getAttribute("src");
var show_half = maxWidth = maxHeight = 0;
smallimg.onmouseover = fonction(){
showimg.style.display = "bloquer" ;
bigimg.style.display = "en ligne" ;
show_half = showimg.offsetHeight/2;
maxWidth = smallimg.clientWidth - showimg.offsetWidth ;
maxHeight = smallimg.clientHeight - showimg.offsetHeight ;
//Les deux variables ci-dessus indiquent la zone où showimg peut être actif.
} ;
smallimg.onmousemove = fonction(e){
var e=window.event?window.event:e;
var num=bigimg.clientWidth/showimg.clientWidth;
var Top = e.clientY - smallimg.offsetTop - show_half;
var Left = e.clientX - smallimg.offsetLeft - show_half;
//La méthode de calcul pour obtenir la position showimg actuellement déplacée est les coordonnées de la souris - les coordonnées du conteneur le plus à l'extérieur - la largeur (hauteur) de la boîte/2
Top = Top<0?0:Top>maxHeight?maxHeight:Top;
Gauche = Gauche<0?0:Gauche>maxWidth?maxWidth:Left;
showimg.style.top = Haut + "px" ;
showimg.style.left = Gauche + "px" ;
bigimg.style.background = "url("+small_url+") -"+Left*num+"px -"+Top*num+"px no-repeat";
} ;
smallimg.onmouseout = fonction(){
showimg.style.display="aucun";
bigimg.style.background="";
bigimg.style.display="aucun"
} ;
</script>
</corps>
</html>