Beispielcode für die Implementierung eines Lupeneffekts mit js-js-Tutorial-php.cn

*{ margin:0px; padding:0px; } #box{ width:430px; height:430px; margin:100px; margin-left:17%; position:relative;//Hier wird die relative Positionierung verwendet, damit andere Elemente sich bei der Positionierung auf dieses Element verlassen können } #move{ background-color:green; width:220px; height:220px; position:absolute; left:0px; top : 0px; display:none;// Zuerst ausblenden und mit js anzeigen } #bimg{ width:430px; height:430px; overflow: versteckt; position:absolute; top:0px; left:450px; display:none;// Zuerst ausblenden, dann js verwenden, um es anzuzeigen } # bimg img{ width:800px; height:800px; position:absolute; top:0px; left:0px; } function 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(){//Bewegen Sie die Maus zum Feld, um das große Bild und das Auswahlfeld anzuzeigen bbimg.style.display = "block"; bmove.style .display="block"; } bbox.onmouseout = function(){//Große Bilder und Auswahlfelder werden nicht angezeigt, wenn sich die Maus vom Feld entfernt bbimg. style.display = "none"; bmove.style.display="none"; } bbox.onmousemove = function(e){//Mausposition abrufen var x = e .clientX;//Maus relativ zum Ansichtsfenster Position var y = e.clientY; var t = bbox.offsetTop;//Boxposition relativ zum Ansichtsfenster var l = bbox.offsetLeft; var _left = x - l - bmove.offsetWidth/2;//Berechnen Sie die Position der Bewegung var _top = y - t -bmove.offsetHeight/2; if(_top _top = 0; else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//An den unteren Rand der Box schieben _top = bbox.offsetHeight-bmove .offsetHeight ; if(_left _left=0; else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//Gleite ganz rechts in der Box _left=bbox.offsetWidth- bmove.offsetWidth ; bmove.style.top = _top + "px";//Position der Bewegung festlegen bmove.style.left = _left + "px"; var w = _left/(bbox .offsetWidth-bmove.offsetWidth);//Berechnen Sie den Anteil der Bewegung var h = _top/(bbox.offsetHeight-bmove.offsetHeight); var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h; //Berechnen Sie die Position des großen Bildes var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w; b_bimg. style.top = -b_bimg_top + "px";//Legen Sie die Positionsinformationen des großen Bildes fest b_bimg.style.left = -b_bimg_left + "px"; }

}

Schwarzer Pfeil:

1 1 2 var x = e.clientX; //鼠标相对于视口的位置 var y = e.clientY; 2 var x = e.clientX; //Die Position der Maus relativ zum Ansichtsfenster 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; //Bewegen Sie Ihre Seite code> var _top = y - t -bmove.offsetHeight/2 ;

2、bimg块的计算 1 bbox.offsetWidth-bmove.offsetWidth 利用move块在可移动范围内的比例来设置大图的位置 move块的移动范围：

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

move块现在的坐标占可移动范围的比例： 1 b_bimg.offsetHeight-bbimg.offsetHeight 1 2 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;