Objektorientierte JavaScript-Implementierung eines Lupengehäuses

<div Klasse="klein">
 <img src="images/timg.jpg" alt="">
 <span class="grayBox"></span>
</div>
<div Klasse="groß">
 <img src="images/timg.jpg" alt="">
</div>

.klein {
 Breite: 400px;
 Höhe: 400px;
 Position: relativ;
 Rand: 4px durchgezogen #ddd;
 Kastenschatten: 0 0 5px rgba(0,0,0,.5);
}
.kleines Bild{
 Breite: 100 %;
 Höhe: 100%;
}
.kleine .graueBox{
 Anzeige: keine;
 Breite: 100px;
 Höhe: 100px;
 Kastenschatten: 0 0 10px rgba (0, 0, 0, 0,5);
 Position: absolut;
 links: 0;
 oben: 0;
} 
.groß{
 Breite: 400px;
 Höhe: 400px;
 Position: absolut;
 links: 700px;
 oben: 100px;
 Rand: 1px durchgezogen #f10;
 Anzeige: keine;
 Überlauf: versteckt;
}
.bigimg{
 Position: absolut;
}

Funktion Lupe(){}

Funktion init(){}

Funktion bindEvent(){}

Funktion eleToggle(){}

Funktion eleMove(){}

neue Lupe({
 small_box: ".klein",
 Schnittbox: ".grayBox",
 big_box: ".groß",
 big_img: ".großes Bild"
});

Funktion Lupe( Optionen ) {
 // Rufen Sie die Initialisierungsfunktion auf, um das empfangene Parameterobjekt zu verarbeiten this.init( options );
}

Magnifier.prototype.init = Funktion (Optionen) {
 //Elemente initialisieren;
 für (var attr in options) {
  dies[attr+"_ele"] = dies.$(Optionen[attr]);
 }
 // Um ​​Leistung zu sparen, holen Sie sich offsetLeft nur einmal;
 dies.small_box_offset = {
  links: this.small_box_ele.offsetLeft,
  oben: this.small_box_ele.offsetTop,
  Breite: parseInt (getComputedStyle (this.small_box_ele).Breite),
  Höhe: parseInt (getComputedStyle (this.small_box_ele).Breite)
 }
 dies.cutting_box_offset = {
  Breite: parseInt (getComputedStyle (this.cutting_box_ele).Breite),
  Höhe: parseInt (getComputedStyle (this.cutting_box_ele).Höhe),
 }
 dies.big_box_offset = {
  Breite: parseInt (getComputedStyle (this.big_box_ele).Breite),
  Höhe: parseInt (getComputedStyle (this.big_box_ele).Höhe),
 }
 // Flagvariable, ob die Maus in die Lupe bewegt wird this.magnifier_start = false;
 this.bindEvent();
 // Bildskalierungsfunktion this.scaleBigImg();
}

Lupe.prototype.$ = Funktion(Selektor){
 gibt document.querySelector(Selektor) zurück;
}

Magnifier.prototype.bindEvent = Funktion(){
 //Bewegen Sie die Maus in die kleine Box links
 this.small_box_ele.addEventListener( "mouseover" , Funktion(){
  // Schneidebox, Big_Box-Elementanzeige;
  this.eleToggle("anzeigen");
  // Ändere die Flag-Variable auf „true“
  dies.magnifier_start = wahr;
  // Ändern Sie dies in der Ereignisfunktion, damit es auf das aktuelle Instanzobjekt verweist}.bind(this));
 //Maus bewegt sich aus der kleinen Box links heraus
 this.small_box_ele.addEventListener( "mouseout" , Funktion(){
  // cutting_box Big_box-Element ist ausgeblendet;
  this.eleToggle("ausblenden");
  dies.magnifier_start = falsch;
 }.binden(dies));
 // Maus bewegt sich, Element bewegt sich;
 this.small_box_ele.addEventListener("Mausbewegung", Funktion( evt ){
  var e = evt || Ereignis;
  // Den xy-Wert des Mauspunkts aus dem sichtbaren Bereich des Browsers abrufen var x = e.clientX;
  var y = e.clientY;
  // Rufen Sie factoryPosition auf, um den Koordinatenwert zu erhalten this.res = this.factoryPosition( x , y );
  // Übergebe die verarbeiteten Koordinatenwerte an die Methode eleMove und ändere die entsprechenden linken und oberen Werte this.eleMove( this.res );
 }.binden(dies)); 
 // Scrollrad-Ereignis;
 document.addEventListener("Mausrad" , Funktion( evt ){
  // Wenn die Maus nicht in die Lupe bewegt wird, wird die Rad-Event-Funktion nicht ausgeführt if(!this.magnifier_start){ return false }
  var e = evt || Ereignis;
  // Bestimmen Sie, ob das Scrollrad oben (Verkleinern) oder unten (Vergrößern) ist.
  this.changeCutBoxScale( e.wheelDelta > 0 ? "schmal" : "groß" );
 }.binden(dies));
}

Magnifier.prototype.eleToggle = Funktion (Typ) {
 // Bestimmen Sie entsprechend dem Typtyp den Anzeigeattributwert des Elements: block | none
 this.cutting_box_ele.style.display = Typ === "anzeigen" ? "Block" : "keine";
 this.big_box_ele.style.display = Typ === "anzeigen" ? "Block" : "keine";
}

Magnifier.prototype.factoryPosition = Funktion( x , y ){
 // Berechnen Sie den linken und oberen Versatz der cutting_box basierend auf den empfangenen x- und y-Werten var _left = x - this.small_box_offset.left - this.cutting_box_offset.width / 2;
 var _top = y - dieser.small_box_offset.top - dieser.cutting_box_offset.height / 2
 // Der Maximalwert links und oben von cutting_box var _left_max = this.small_box_offset.width - this.cutting_box_offset.width;
 var _top_max = diese.small_box_offset.height - diese.cutting_box_offset.height;
 // Überwachung der Mindestgrenze;
 _links = _links <= 0? 0: _links;
 _top = _top <= 0 ? 0 : _top
 // Maximalwerterkennung _left = _left >= _left_max ? _left_max : _left;
 _top = _top >= _top_max? _top_max: _top;
 //Gib den verarbeiteten Koordinatenpunktwert und den Verhältniskoeffizienten der Bewegungsdistanz zum Maximalwert zurück return {
  x: _links,
  y: _oben,
  xp: _links / _links_max,
  yp:_top / _top_max
 }
}

Magnifier.prototype.eleMove = Funktion (Positionsobjekt) {
 // Bewegungsbereich der linken cutting_box this.cutting_box_ele.style.left = position_obj.x + "px";
 this.cutting_box_ele.style.top = position_obj.y + "px";
 // Der Bewegungsbereich des großen Bildes big_img. Die Bewegungsrichtungen von cutting_box und big_img sind entgegengesetzt this.big_img_ele.style.left = -position_obj.xp * this.big_img_boundary.left_max + "px";
 this.big_img_ele.style.top = -position_obj.yp * this.big_img_boundary.top_max + "px";
}

Magnifier.prototype.scaleBigImg = Funktion(){
 // Vergrößerungsverhältnis;
 var width_p = diese.big_box_offset.width / diese.cutting_box_offset.width;
 var height_p = diese.big_box_offset.height / diese.cutting_box_offset.height;
 // Breite und Höhe von big_img nach der Vergrößerung abrufen;
 dies.big_img_offset = {
  Breite: Breite_p * this.small_box_offset.width,
  Höhe: Höhe_p * this.small_box_offset.height,
 }
 // Berechnen Sie die Grenzen der Big_Img-Bewegung.
 dies.big_img_boundary = {
  left_max: dieser.großes_Bild_Offset.Breite - dieser.große_Box_Offset.Breite,
  top_max: dieser.großes_Bild_Offset.Höhe – dieser.große_Box_Offset.Höhe
 }
 //Proportionale Breite und Höhe für das Bild festlegen;
 dies.big_img_ele.style.width = dies.big_img_offset.width + "px";
 this.big_img_ele.style.height = this.big_img_offset.height + "px";
}

Magnifier.prototype.changeCutBoxScale = Funktion (Typ) {
 Schalter (Typ) {
  //Gehäuse "groß" vergrößern:
   diese.Schneidebox_Offset.Breite += 2;
   Dies.cutting_box_offset.height += 2;
   // Verschieben Sie cutting_box nach links und oben, um die Maus in der Mitte zu halten. this.res.x --;
   dies.res.y --; 
   brechen;
  // Schmaler Fall "schmal":
   diese.cutting_box_offset.width -= 2;
   this.cutting_box_offset.height -= 2;
   dies.res.x++;
   dies.res.y++;
   brechen;
  Standard:
   brechen;
 }
 this.cutting_box_ele.style.width = this.cutting_box_offset.width + "px";
 this.cutting_box_ele.style.height = this.cutting_box_offset.height + "px";
 // Rufen Sie nach der Positionsänderung das entsprechende Verhältnisberechnungstool auf.
 dies.scaleBigImg();
 // Große Bildbewegung neu berechnen;
 dies.eleMove(dieses.res);
}

<button class="btn" data-src=""><img src="" alt=""></button>
<button class="btn" data-src=""><img src="" alt=""></button>

// Alle Schaltflächen auswählen, die unterschiedliche Bilder darstellen var btns = document.querySelectorAll(".btn");
// Wählen Sie die img-Tags in den kleinen und großen Containern aus. var imgs = document.querySelectorAll(".big img,.small img");
für(var i = 0 ; i < btns.length ; i++){
 btns[i].onclick = Funktion(){
  // Holen Sie sich die verschiedenen data-src-Attribute auf jeder Schaltfläche var src = this.getAttribute("data-src");
  für(var k = 0 ; k < imgs.length ; k++){
   // Ersetze den Attributwert des entsprechenden src-Attributs imgs[k].src = src;
  }
 }
}