Native JS-Implementierung der Lupenkomponente

Native JS-Implementierung der Lupenkomponente

In diesem Artikelbeispiel wird der spezifische Code für js zur Entwicklung einer Lupenkomponente zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Funktionale Anforderungen:

1. Erstellen Sie eine Symbolliste basierend auf dem Bildarray.
2. Wenn die Maus über ein Symbol bewegt wird, wird dem aktuellen Symbol ein roter Rahmen hinzugefügt.
3. Wenn Sie mit der Maus über das Symbol fahren, wird im oberen Bildbereich das entsprechende Bild und rechts der vergrößerte Bildinhalt angezeigt.
4. Wenn Sie die Maus im Bildbereich bewegen, wird auf der rechten Seite der Zoomeffekt erzielt.
5. Klicken Sie in der Symbolliste unten auf die linken und rechten Schaltflächen, um die Seiten umzublättern.
6. Wenn der Symbolinhalt nicht für eine Seite ausreicht, wird er nur an die Position des letzten Symbols verschoben.

Nehmen Sie die Detailseite von JD.com als Beispiel, um die Wirkung zu sehen:

Der Inhalt der Lupe wird in die Datei Zoom.js geschrieben, und der Inhalt der Symbolliste darunter wird in die Datei IconList.js geschrieben. Wenn die Maus über das Symbol darunter fährt, muss das Hintergrundbild des Div in der Lupe geändert werden. Hier wird Event Throwing verwendet.

Der Code ist unten angehängt:

HTML-Struktur:

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <Titel>Zoom</Titel>
</Kopf>
<Text>
 <Skripttyp="Modul">
  Zoom aus „./js/Zoom.js“ importieren;
  //Symbol-Array let list=["a_icon.jpg","e_icon.jpg","f_icon.jpg","g_icon.jpg","h_icon.jpg","i_icon.jpg","j_icon.jpg",];
  init();
  Funktion init(){
   let zoom = neuer Zoom(Liste,"./img/");
   zoom.appendTo("Körper");
  }
 </Skript>
</body>
</html>

Erstellen Sie mit der Datei Zoom.js eine Lupenkomponente:

importiere Utils aus "./Utils.js";
importiere IconList aus „./IconList.js“;
exportiere Standardklasse Zoom{
 statische Stile=false;
 statische kleine Breite = 450;
 statische Maskenbreite = 303,75;
 statische Zoombreite = 540;
 statisches SET_BG_IMG="set_bg_img";
 Konstruktor(_list,_basePath){
  wenn(_basePath) _list=_list.map(item=>_basePath+item);
  //Erstellen Sie den äußeren Div-Container this.elem=this.createE();
  //Auf Ereignisse warten und das Hintergrundbild von zoomSmall ändern document.addEventListener(Zoom.SET_BG_IMG, e=>this.setBgImg(e));
  //Erstellen Sie die Symbolliste darunter this.createIconList(_list,this.elem);
 }
 erstellenE(){
  //Einen äußeren Div-Container erstellen let div=Utils.createE("div");
  div.Klassenname="zoomContainer";
  div.innerHTML=`<div class="zoomSmall" id="zoomSmall"><div class="zoomMask" id="zoomMask"></div></div>
  <div class="zoomContent" id="zoomCont"></div>`;
  //Stil festlegenZoom.setStyle();
  //Stil abrufen Utils.getIdElem(div,this);
  //Auf Mauseingabeereignisse warten this.zoomSmall.addEventListener("mouseenter",e=>this.mouseHandler(e));
  div zurückgeben;
 }
 anhängenAn(übergeordnet){
  Utils.appendTo(dieses.Element,übergeordnet);
 }
 setBgImg(e){
  //Hintergrundbild festlegen this.zoomSmall.style.backgroundImage=`url(${e.src})`;
  dies.zoomCont.style.backgroundImage=`url(${e.src})`;
 }
 Symbolliste erstellen(Liste,übergeordnetes Element){
  //Erstellen Sie die Symbolliste unten let iconList=new IconList(list);
  Utils.appendTo(iconList.elem,übergeordnet);
 }
 Maushandler(e){
  Schalter (e.Typ) {
   Fall "mouseenter":
    //Nachdem die Maus hineingleitet, werden die Maske und das große Bild rechts angezeigt this.zoomMask.style.display="block";
    dies.zoomCont.style.display="block";
    //Auf Mausbewegungen und Slide-Out-Ereignisse achten this.mouseHandlers=e=>this.mouseHandler(e);
    this.zoomSmall.addEventListener("Mausbewegung",this.mouseHandlers);
    this.zoomSmall.addEventListener("mouseleave",this.mouseHandlers);
    brechen;
   Fall "Mausbewegung":
    //Maskenbewegung this.zoomMaskMove(e);
    brechen;
   Fall "Mausblatt":
    //Nachdem die Maus herausbewegt wird, werden die Maske und das große Bild rechts angezeigt this.zoomMask.style.display="none";
    this.zoomCont.style.display="keine";
    //Mausbewegungs- und Ausschiebeereignisse entfernen this.zoomSmall.removeEventListener("mousemove",this.mouseHandlers);
    this.zoomSmall.removeEventListener("mouseleave",this.mouseHandlers);
    brechen;
  }
 }
 zoomMaskMove(e){
  //Maskenbewegung let rect = this.elem.getBoundingClientRect();
  //Berechnen Sie die Werte von let und top, die den Mauskoordinaten entsprechen – dem linken Wert des übergeordneten Containers – der halben Breite der Maske let x=e.clientX-rect.x-Zoom.mask_width/2;
  sei y = e.clientY-rect.y-Zoom.mask_width/2;
  //Beurteile den Bereich von links und oben if(x<0) x=0;
  wenn(x>Zoom.kleine_Breite-Zoom.Maskenbreite) x=Zoom.kleine_Breite-Zoom.Maskenbreite;
  wenn(y<0) y=0;
  wenn(y>Zoom.kleine_Breite-Zoom.Maskenbreite) y=Zoom.kleine_Breite-Zoom.Maskenbreite;
  dies.zoomMask.style.left=x+"px";
  dies.zoomMask.style.top=y+"px";
  //Das große Bild verschieben this.zoomContMove(x,y);
 }
 zoomContMove(_x,_y){
  //Berechnen Sie die Hintergrundpositionierung des großen Bildes, Formel: Zoombreite/Maskenbreite=linker Wert des Zoom-Hintergrunds/linker Wert der Maske let x=-Zoom.zoom_width/Zoom.mask_width*_x;
  lass y = -Zoom.zoom_width / Zoom.mask_width * _y;
  dies.zoomCont.style.backgroundPosition=x+"px "+y+"px";
 }
 statischer Stil festlegen(){
  //Stil festlegen if(Zoom.styles) return;
  Zoom.styles=true;
  Utils.insertCss(".zoomContainer",{
   Breite:Zoom.small_width+"px",
   Höhe:Zoom.small_width+"px",
   Position: „relativ“
  })
  Utils.insertCss(".zoomSmall",{
   Breite:Zoom.small_width+"px",
   Höhe:Zoom.small_width+"px",
   Rahmen: "1px durchgezogen #000",
   Hintergrundgröße: "100% 100%",
   Position: „absolut“,
   links:"0px",
   oben: "0px"
  })
  Utils.insertCss(".zoomMask",{
   Breite: diese.Maskenbreite + "px",
   Höhe: diese.Maskenbreite + "px",
   Hintergrundfarbe: "rgba(200,170,0,0.3)",
   Position: "absolut",
   links: "0px",
   oben: "0px",
   Anzeige: "keine"
  })
  Utils.insertCss(".zoomContent",{
   Breite: this.zoom_width + "px",
   Höhe: this.zoom_width + "px",
   Rahmen: "1px durchgezogen #ccc",
   Position: "absolut",
   links: (this.small_width + 2) + "px",
   oben: "0px",
   Anzeige: "keine"
  })
 }
}

Erstellen Sie mit der Datei IconList.js die folgende Symbolliste und vervollständigen Sie den Seitenumblättereffekt:

importiere Utils aus "./Utils.js";
Zoom aus "./Zoom.js" importieren;
exportiere Standardklasse IconList{
 statische Stile=false;
 static num=5;//Anzahl der pro Seite angezeigten Icons static gap=0;//Gibt den linken und rechten Abstand von li an position=0;//Auf welcher Seite wird das Icon aktuell angezeigt x=0;//Linker Wert der Liste prepIcon;//Das zuletzt angeklickte Icon static SET_BG_IMG="set_bg_img";
 Konstruktor(Liste){
  diese.liste=liste;
  dies.elem=dies.createE();
 }
 erstellenE(){
  //Einen äußeren Container erstellen let div=Utils.createE("div");
  div.Klassenname="SymbolContainer";
  div.innerHTML=`<img class="prevBtn" src="./img/prev.png"><div class="iconListCont">${this.createIcon()}</div><img class="nextBtn" src="./img/next.png">`;
  //CSS-Stil festlegen IconList.setStyles(this.list);
  //Element abrufen Utils.getIdElem(div,this);
  //Äußerer Container wartet auf Klickereignisse div.addEventListener("click",e=>this.clickHandler(e));
  //Die Symbolliste überwacht das Mouseover-Ereignis this.iconList.addEventListener("mouseover",e=>this.mouseHandler(e));
  //Standardmäßig wird der Rand des ersten Symbols angezeigt this.setIconState(this.iconList.firstElementChild);
  //Das erste Bild wird standardmäßig angezeigt this.setBgImg(this.iconList.firstElementChild.firstElementChild);
  div zurückgeben;
 }
 Symbol erstellen(){
  //Eine Symbolliste erstellen let str=`<ul class="iconList clearfix" id="iconList">`;
  diese.Liste.fürJeden(item=>{
   str+=`<li><img src="${item}"></li>`;
  })
  str+="</ul>";
  gibt str zurück;
 }
 KlickHandler(e){
  sei src = e.target.src;
  //Wenn die angeklickte Schaltfläche nicht die linke oder rechte Schaltfläche ist, direkt herausspringen if(!/prev/.test(src)&&!/next/.test(src)) return;
  //Die tatsächliche Breite jedes li, Breite+Rahmen+Rand
  sei liWidth=54+4+IconList.gap;
  //Seite ist die Gesamtzahl der ganzzahligen Seiten let page=Math.floor(this.list.length/IconList.num)-1;
  //Rest ist die Anzahl der verbleibenden Symbole, die nicht für eine Seite ausreichen. let remainder=this.list.length%IconList.num;
  wenn(/prev/.test(src)){
   //Wenn die Schaltfläche „Vorherige Seite“ angeklickt wird if(this.x===0) return;
   //Zur letzten Seite wechseln if(this.position===0&&remainder>0){
    //Die Bewegungsdistanz plus die verbleibenden Symbole sind gleich li width * this.x+=liWidth*remainder;
   }
   sonst wenn(diese.position<=seite){
    diese.position--;
    //Die zurückgelegte Strecke plus die Breite von li * die Anzahl der pro Seite angezeigten Symbole (5)
    dies.x+=liWidth*IconList.num;
   }
  }sonst wenn(/nächster/.test(src)){
   //Wenn die Schaltfläche „Nächste Seite“ angeklickt wird, if(this.x===-(this.list.length-IconList.num)*liWidth) return;
   wenn(diese.position===seite&&rest>0){
    //Die zurückgelegte Distanz abzüglich der Breite von li * die Anzahl der verbleibenden Symbole this.x-=liWidth*remainder;
   }
   sonst wenn(diese.position<seite){
    diese.position++;
    //Die zurückgelegte Strecke abzüglich der Breite von li * der Anzahl der pro Seite angezeigten Symbole (5)
    dies.x-=liWidth*IconList.num;
   }
  }
  //Legen Sie den linken Wert der Symbolliste fest this.iconList.style.left=this.x+"px";
 }
 Maushandler(e){
  //Wenn das Tag, über das Sie fahren, kein Img-Tag ist, beenden Sie es einfach, wenn (e.target.constructor!==HTMLImageElement) return;
  //Hintergrundbild festlegen this.setBgImg(e.target);
  //Stil des aktuellen Schiebesymbols festlegen this.setIconState(e.target.parentElement);
 }
 setIconState(Ziel){
  //Entfernen Sie den aktiven Stil des vorherigen Bildlaufsymbols, wenn (this.prepIcon) Utils.removeClass (this.prepIcon, "active");
  //Weisen Sie diesem.prepIcon das aktuelle Gleitobjekt zu
  dies.prepIcon=Ziel;
  //Dem aktuellen Schiebesymbol einen aktiven Stil hinzufügen Utils.addClass(this.prepIcon,"active");
 }
 setBgImg(Ziel){
  //Ereignis auslösen und die Quelle des aktuellen Bildes übergeben let src=target.src.replace("_icon","");
  let evt = neues Ereignis (IconList.SET_BG_IMG);
  evt.src=Quelle;
  Dokument.dispatchEvent(evt);
 }
 statische setStyles(Liste){
  //Stil festlegen if(IconList.styles) return;
  IconList.styles=true;
  Utils.insertCss(".iconContainer",{
   Breite:Zoom.small_width+2+"px",
   Höhe: "58px",
   Position: "absolut",
   oben: Zoom.small_width+2+"px",
   links: "0px",
  })
  Utils.insertCss(".iconContainer>img",{
   Breite: "22px",
   Höhe: "32px",
   Cursor: "Zeiger",
   Position: „absolut“,
   oben: "13px",
  })
  Utils.insertCss(".prevBtn",{
   links:"8px"
  })
  Utils.insertCss(".nextBtn",{
   rechts:"8px"
  })
  Utils.insertCss(".iconListCont",{
   Breite:Zoom.small_width-30*2+"px",
   Höhe: "58px",
   Position: „relativ“,
   links:"30px",
   Überlauf: „versteckt“
  })
  IconList.gap=((Zoom.small_width-30*2)-(54+4)*IconList.num)/IconList.num;
  Utils.insertCss(".iconList",{
   Breite: (54 + 4 + IconList.Lücke) * Listenlänge + "px",
   Listenstil: „keine“,
   Polsterung: "0px",
   Rand: "0px",
   Position: „absolut“,
   links:"0px",
   oben: "0px",
   Übergang: „alle .3s“
  })
  Utils.insertCss(".iconList li",{
   float:"links",
   Breite: "54px",
   Höhe: "54px",
   Rand:"0px "+IconList.gap/2+"px",
   Cursor: "Zeiger",
   Rahmen: „2px durchgehend transparent“
  })
  Utils.insertCss(".iconList li.active",{
   Rahmenfarbe: "#f00"
  })
  Utils.insertCss(".iconList li>img",{
   Breite: "54px",
   Höhe: "54px"
  })
  Utils.insertCss(".clearfix::after",{
   Inhalt:"\".\"",
   Anzeige: „Block“,
   Höhe: "0px",
   klar:"beide",
   Überlauf: „versteckt“,
   Sichtbarkeit: „versteckt“
  })
 }
}

Die Datei Utils.js ist ein Toolkit:

exportiere Standardklasse Utils{
 statisch erstellenE(Element,Stil,Vorbereitung){
  elem = Dokument.Element erstellen(elem);
  wenn (Stil) für (let prop in Stil) elem.style[prop]=style[prop];
  wenn (Vorbereitung) für (let prop in prep) elem[prop]=prep[prop];
  Rücklaufelement;
 }
 statisches Anhängen an (Element, übergeordnetes Element) {
  wenn (übergeordneter.Konstruktor === String) übergeordnetes Element = document.querySelector(übergeordnetes Element);
  übergeordnetes Element.AnhängenKind(Element);
 }
 statisches EinfügenVorher(Element,übergeordnet){
  wenn (übergeordneter.Konstruktor === String) übergeordnetes Element = Dokument.Abfrageselektor (übergeordneter Element);
  parent.insertBefore(elem,parent.firstElementChild);
 }
 statische Zufallszahl(min,max){
  gibt Math.floor(Math.random*(max-min)+min) zurück;
 }
 statische Zufallsfarbe (Alpha) {
  alpha=alpha||Math.random().toFixed(1);
  wenn(isNaN(alpha)) alpha=1;
  wenn (Alpha>1) Alpha = 1;
  wenn (alpha<0) alpha=0;
  Lassen Sie col="rgba(";
  für (lass i = 0; i < 3; i++) {
   col+=Utils.randomNum(0,256)+",";
  }
  col+=alpha+")";
  Rückspalte;
 }
 statisches insertCss(Auswählen,Stile){
  wenn(document.styleSheets.length===0){
   let styleS = Utils.createE("Stil");
   Utils.appendTo(styleS,document.head);
  }
  let styleSheet = Dokument.styleSheets[Dokument.styleSheets.Länge-1];
  Lassen Sie str = auswählen + "{";
  für (var prop in Stilen) {
   str+=prop.replace(/[AZ]/g,function(item){
    return "-"+item.toLocaleLowerCase();
   })+":"+Stile[Eigenschaft]+";";
  }
  str+="}"
  styleSheet.insertRule(str,styleSheet.cssRules.length);
 }
 statisch getIdElem(elem,obj){
  wenn(elem.id) obj[elem.id]=elem;
  wenn (elem.children.length===0) returniere obj;
  für (lass i = 0; i < Element. Kinder. Länge; i ++) {
   Utils.getIdElem(elem.children[i],obj);
  }
 }
 statische AddClass(Element,Klassenname){
  let arr=(elem.className+" "+className).match(/\S+/g);
  arr = arr.filter((Element,Index)=>arr.indexOf(Element,Index+1)<0)
  elem.className=arr.join(" ");
 }
 statische removeClass(Element,Klassenname){
  wenn(!elem.klassenname) return;
  lass arr = elem.className.match(/\S+/g);
  Lassen Sie arr1 = Klassenname.match(/\S+/g);
  arr1.fürJeden(item=>{
   arr = arr.filter(t=>t!==Element)
  })
  elem.className=arr.join(" ");
 }
 static hatKlasse(Element,Klassenname){
  wenn(!elem.className) false zurückgibt;
  lass arr = elem.className.match(/\S+/g);
  Lassen Sie arr1 = Klassenname.match(/\S+/g);
  lass res;
  arr1.fürJeden(item=>{
   res = arr.ein(es=>es===Element)
  })
  Rückgabewert;
 }
 statisches loadImg({Liste,Basispfad,Rückruf}){
  wenn(!Liste || Listenlänge===0) return;
  wenn(Basispfad) Liste=Liste.Map(Element=>Basispfad+Element);
  let img = Utils.createE("img");
  img.data={
   Liste:Liste,
   Rückruf: Rückruf,
   Ergebnisliste:[],
   Zahl: 0
  }
  img.addEventListener("laden",Utils.loadImgHandler);
  img.src=Liste[Bild.Daten.Nummer];
 }
 statischer loadImgHandler(e){
  Lassen Sie die Daten = e.currentTarget.data;
  : Die DatenresultList.push(e.currentTarget.cloneNode(false));
  Daten.Nummer++;
  wenn(Daten.Anzahl>Daten.Liste.Länge-1){
   e.currentTarget.removeEventListener("laden",Utils.loadImgHandler);
   Daten.Rückruf(Daten.Ergebnisliste);
   Daten=null;
   zurückkehren;
  }
  e.currentTarget.src=Daten.Liste[Daten.Nummer];
 }
}

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:
  • JavaScript implementiert die umfassendste Codeanalyse einer einfachen Lupe (ES5)
  • js, um einen einfachen Lupeneffekt zu erzielen
  • js realisiert die Lupenfunktion der Shopping-Website
  • js, um einfache Lupeneffekte zu erzielen
  • js lupe vergrößerungsbild effekt
  • Ein einfaches Beispiel für die Verwendung von js, um den Effekt einer Lupe zu erzielen
  • Eine magische Javascript-Bildlupe
  • Lupeneffekt in nativem JS geschrieben
  • Bildlupe jquery.jqzoom.js Anwendungsbeispiel mit Lupensymbol
  • JS-Version des Bildlupeneffekts

<<:  So schreiben Sie Konfigurationsdateien und verwenden MyBatis einfach

>>:  Mehrbenutzer-Lizenzierung für Remotedesktopverbindungen unter Windows Server 2008 R2

Artikel empfehlen

10 Tipps zur Website-Benutzerfreundlichkeit, die jeder kennen sollte

Lassen Sie uns keine weitere Zeit verschwenden un...

VMware Workstation Pro installiert das Win10-Betriebssystem in Reinform

Dieser Artikel beschreibt die Schritte zur Instal...

JS ES: Neue Funktion zur variablen Entkopplungszuweisung

Inhaltsverzeichnis 1. Entkoppelte Zuweisung von A...

Implementierung der Deduplizierung von Dateiinhalten sowie von Schnittmengen und Unterschieden in Linux

1. Datendeduplizierung Bei der täglichen Arbeit k...

Detaillierte Erklärung der Text-Fill-Color-Eigenschaft in CSS3

Was bedeutet Textfüllfarbe? Rein wörtlich bedeute...

Detaillierte Beschreibung des komponentenbasierten Front-End-Entwicklungsprozesses

Hintergrund <br />Studenten, die am Front-En...

Lösen Sie das Problem verstümmelter chinesischer Schriftzeichen in Mysql5.7

Wenn Sie MySQL 5.7 verwenden, werden Sie feststel...

Informationen zu VUEs Kompilierungsumfang und Slotumfang-Slotproblemen

Was sind Slots? Die Slot-Direktive ist v-slot, di...

Der vollständige Prozess der Docker-Image-Erstellung

Inhaltsverzeichnis Vorwort Erstellungsschritte Er...

Detaillierte Erklärung zur Verwendung von Bussen in Vue

Vue-Busmechanismus (Bus) Zusätzlich zur Verwendun...

Beispielcode zur Implementierung der Bereitstellung mehrerer Anwendungen mit Tomcat+Nginx

Inhaltsverzeichnis Bereitstellung mehrerer Anwend...

MySQL-Datenbank muss SQL-Anweisungen kennen (erweiterte Version)

Dies ist eine erweiterte Version. Die Fragen und ...

Acht Beispiele, wie Vue Komponentenkommunikation implementiert

Inhaltsverzeichnis 1. Props übergeordnete Kompone...

So zeigen Sie Serverhardwareinformationen in Linux an

Hallo zusammen, heute ist Double 12, habt ihr sch...

Beheben Sie das Problem, dass beim Mounten von Dateien oder Verzeichnissen der relative Pfad ./ in Docker Run fehlschlägt

Erlaube './' relative Pfade in docker-com...