Exemple de code pour implémenter l'effet loupe à l'aide de js-js tutoriel-php.cn

*{ margin:0px; padding:0px; } #box{ width:430px; height:430px; margin:100px; margin-left:17%; position:relative;//Le positionnement relatif est utilisé ici afin que d'autres éléments puissent s'appuyer sur cet élément pour le positionnement } #move{ background-color:green; width:220px; height:220px; position:absolute; left:0px; top : 0px; display:none;//Cachez-le d'abord et utilisez js pour l'afficher } #bimg{ width:430px; height:430px; overflow : Hidden; position:absolute; top:0px; left:450px; display:none;//Cachez-le d'abord, puis utilisez js pour le faire afficher } # bimg img{ width:800px; height:800px; position:absolute; top:0px; left:0px; } fonction bigimg(){ var bbox = document.getElementById("box"); var bmove = document.getElementById("move"); var bbimg = document.getElementById("bimg"); var b_bimg = document . getElementById("b_bimg"); bbox.onmouseover = function(){//Déplacez la souris vers la zone pour afficher la grande image et la zone de sélection bbimg.style.display = "block"; bmove.style .display="block"; } bbox.onmouseout = function(){//Les grandes images et les zones de sélection ne seront pas affichées lorsque la souris s'éloigne de la zone bbimg. style.display = "none"; bmove.style.display="none"; } bbox.onmousemove = function(e){//Obtenir la position de la souris var x = e .clientX;//Position de la souris par rapport à la fenêtre var y = e.clientY; var t = bbox.offsetTop;//Position de la boîte par rapport à la fenêtre var l = bbox.offsetLeft; var _left = x - l - bmove.offsetWidth/2;//Calculer la position du déplacement var _top = y - t -bmove.offsetHeight/2; if(_top _top = 0; else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//Glisser vers le bas de la boîte _top = bbox.offsetHeight-bmove .offsetHeight ; if(_left _left=0; else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//Slide à l'extrême droite de la boîte _left=bbox.offsetWidth- bmove.offsetWidth ; bmove.style.top = _top + "px";//Définir la position du déplacement bmove.style.left = _left + "px"; var w = _left/(bbox .offsetWidth-bmove.offsetWidth);//Calculer la proportion de mouvement var h = _top/(bbox.offsetHeight-bmove.offsetHeight); var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h; //Calculer la position de la grande image var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w; b_bimg. style.top = -b_bimg_top + "px";//Définir les informations de position de la grande image b_bimg.style.left = -b_bimg_left + "px"; }

}

Flèche noire :

1 1 2 var x = e.clientX; //鼠标相对于视口的位置 var y = e.clientY; 2 var x = e.clientX; //La position de la souris par rapport à la fenêtre var y = e.clientY; 红色箭头：

1 1 2 var t = bbox.offsetTop; //box相对于视口的位置 var l = bbox.offsetLeft; 2 var t = bbox.offsetTop; //box相对于视口的位置 var l = bbox.offsetLeft;

橙色箭头： 1 2 var _left = x - l - bmove.offsetWidth/2; //计算move的位置 var _top = y - t -bmove.offsetHeight/2;

1 2

var _left = x - l - bmove.offsetWidth/2; //计算move的位置 code> var _top = y - t -bmove.offsetHeight/2 ;

2、bimg块的计算 1 bbox.offsetWidth-bmove.offsetWidth 利用move

1 bbox.offsetWidth-bmove.offsetWidth 1 2 var w = _left/(bbox.offsetWidth-bmove.offsetWidth); //计算移动的比例 var h = _top/(bbox.offsetHeight-bmove.offsetHeight); déplacer块现在的坐标占可移动范围的比例：

1 2 1 b_bimg.offsetHeight-bbimg.offsetHeight var w = _left/(bbox. offsetWidth-bmove.offsetWidth); //计算移动的比例 var h = _top/(bbox.offsetHeight-bmove.offsetHeight);

bimg的移动范围： 1 2 var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h; //计算大图的位置 var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w; 1 b_bimg.offsetHeight-bbimg.offsetHeight bimg的位置： 1 2 var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h; //计算大图的位置 var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;