Objektorientierte JavaScript-Implementierung eines Lupengehäuses

Objektorientierte JavaScript-Implementierung eines Lupengehäuses

In diesem Artikel wird der spezifische Code der objektorientierten JavaScript-Implementierung der Lupe zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Rendern

Analyse des Implementierungsprinzips

Wie in der Abbildung gezeigt

Wenn das Mausbewegungsereignis ausgelöst wird, werden die Echtzeitkoordinaten x und y gemäß den Eigenschaften clientX und clientY des Ereignisobjekts abgerufen.
Wert abzüglich des offsetLeft-Werts von small_box und der halben Breite von cutting_box . So erhalten Sie den Offset-Links-Wert von cutting_box und dasselbe gilt für den oberen Wert. Wenn cutting_box die rechten und unteren Seiten sowie die linken und oberen Seiten ihre Maximalwerte erreicht. Durch Vergleichen der sich in Echtzeit ändernden linken und oberen Werte mit ihren jeweiligen Maximalwerten können wir ein Verhältnis ermitteln und dieses Verhältnis dann verwenden, um die linke und obere Position des big_img-Elements auf der rechten Seite zu berechnen. Die konkrete Methode lautet: Ermitteln Sie zuerst die Breite und Höhe von big_img nach der Vergrößerung und verwenden Sie dann diese Breite und Höhe, um den Maximalwert links und oben von big_img zu ermitteln. Wenn dieser Maximalwert mit dem obigen Verhältniswert multipliziert wird, erhält man die entsprechenden linken und oberen Werte von big_img.
Hinweis: So berechnen Sie die Breite und Höhe von big_img nach der Vergrößerung
Breite und Höhe der kleinen Box / Schnittbox = Breite und Höhe des großen Bilds / Breite und Höhe der großen Box. (Nur die Breite und Höhe von big_img sind unbekannt)

Grundlegende Seitenstruktur

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

CSS Code

.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;
}

Objektorientierte Implementierung

Analyse (OOA)

  • Elementauswahlfunktion
  • Bindungsereignistreiber
  • Elemente ein- und ausblenden
  • Kleines Bild bewegt sich, großes Bild zoomt heran und folgt der Bewegungsfunktion
  • Mausrad-Zoomfunktion

Entwurf (OOD)

Konstruktor

Funktion Lupe(){}

Initialisieren Sie jedes Funktionsmodul

Funktion init(){}

Ereignisbindungsfunktion

Funktion bindEvent(){}

Elemente ein- und ausblenden

Funktion eleToggle(){}

Kleines Bild bewegt sich, großes Bild zoomt heran und folgt der Funktion

Funktion eleMove(){}

Schreiben (OOP)

  • Zunächst einmal ist klar, dass sämtliche Funktionen auf dem Prototyp des Lupenkonstrukteurs untergebracht werden sollen.
  • Zweitens sollte beim Instanziieren eines Objekts der Parameter des Objekttyps wie unten gezeigt übergeben werden:
neue Lupe({
 small_box: ".klein",
 Schnittbox: ".grayBox",
 big_box: ".groß",
 big_img: ".großes Bild"
});

Der Konstruktor muss nun die bei der Instanziierung übergebenen Parameter erhalten:

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

Die Initialisierungsfunktion vervollständigt die Initialisierungselemente und erhält die Werte der Offset-Reihen von small_box, cutting_box und big_box:

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();
}

Elementfunktion auswählen:

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

Ereignisbindungsfunktion:

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));
}

Funktionen zum Anzeigen und Ausblenden von Elementen:

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";
}

Verarbeiten Sie die x- und y-Werte der Koordinatenpunkte, die bei der Mausbewegung erhalten werden:

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
 }
}

Kleines Bild bewegt sich, großes Bild zoomt heran und folgt Funktion:

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";
}

Bildvergrößerungsfunktion:

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";
}

Beim Scrollen mit dem Mausrad muss gleichzeitig die Größe der cutting_box links verändert werden:

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);
}

Zusatzfunktionen: Zwischen mehreren Bildern wechseln und entsprechende Bilder vergrößern.
Tags hinzufügen: benutzerdefinierte data-src-Attribute zum Speichern verschiedener Bildpfade

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

Schließlich müssen Sie nach der Instanziierung des Lupenobjekts nur noch das Klick- oder Verschiebeereignis an jede Schaltfläche binden und dann den src-Attributwert des img in den kleinen und großen Containern durch den entsprechenden data-src-Attributwert ersetzen, wie unten gezeigt:

// 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;
  }
 }
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Implementierungsprozess des Lupeneffekts im Javascript-Beispielprojekt
  • JavaScript realisiert Lupen-Spezialeffekte
  • JavaScript imitiert die Spezialeffekte der Jingdong-Lupe
  • JavaScript imitiert den Jingdong-Lupeneffekt
  • JavaScript imitiert den Taobao-Lupeneffekt
  • JavaScript zum Erzielen eines Lupeneffekts
  • Ideen und Codes zur Realisierung des Lupeneffekts in js
  • JavaScript-Implementierung von Lupendetails

<<:  Fassen Sie die häufigsten Anwendungsprobleme von XHTML-Code zusammen

>>:  Detaillierte Erläuterung der MySQL-Optimierung für Schreibprobleme im großen Maßstab

Artikel empfehlen

Implementierung der CentOS8.0-Netzwerkkonfiguration

1. Unterschiede in der Netzwerkkonfiguration zwis...

Eine kurze Analyse der Verwendung von USING und HAVING in MySQL

Dieser Artikel veranschaulicht anhand von Beispie...

Analyse der Vorteile von path.join() in Node.js

Sie fragen sich möglicherweise, warum Sie die Met...

So implementieren Sie die Docker-Volume-Montage

Die Erstellung des einfachsten „Hello World“-Ausg...

Mehrere Möglichkeiten zur Implementierung eines 0-ms-Verzögerungstimers in js

Inhaltsverzeichnis WarteschlangeMikrotask asynchr...

MySQL-Gruppe durch Gruppieren mehrerer Felder

Bei täglichen Entwicklungsaufgaben verwenden wir ...

Wichtige Updates für MySQL 8.0.23 (neue Funktionen)

Autor: Guan Changlong ist DBA in der Delivery Ser...

So konfigurieren Sie die PDFLatex-Umgebung in Docker

Technischer Hintergrund Latex ist ein unverzichtb...

So löschen und deinstallieren Sie MySQL in Windows 10 vollständig

Vorwort Dieser Artikel enthält eine Anleitung zum...

Mehrere Grundsätze für die Produktdesign-Referenz auf Websites

In der folgenden Analyse geht es um Produktdesign...

Detaillierte Erklärung zum Festlegen des Kontextpfads in der Webanwendung

URL: http://hostname.com/contextPath/servletPath/...