JS-Version des Bildlupeneffekts
|
In diesem Artikel wird der spezifische JS-Code zur Erzielung des Bildlupeneffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt
<!DOCTYPE html>
<html>
<head lang="de">
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
*{
Polsterung: 0;
Rand: 0;
}
.Kasten{
Position: relativ;
Breite: 350px;
Höhe: 510px;
Rand: automatisch;
}
.Mitte {
Position: relativ;
Rand: 1px durchgehend rosa;
Überlauf: versteckt;
}
.hover_ceng{
Position: absolut;
Z-Index: 1;
Hintergrund: URL (./img/bg.png);
Hintergrundgröße: 4px 4px;
Anzeige: keine;
}
.mitte >img{
Breite: 100 %;
Höhe: 100 %;
}
.klein{
Position: relativ;
Breite: 350px;
Höhe: 110px;
Textausrichtung: zentriert;
}
.small>span{
Position: absolut;
Anzeige:Block;
oben: 15px;
Zeilenhöhe: 50px;
Schriftgröße: 20px;
Breite: 20px;
Höhe: 50px;
Hintergrund: #eabcb8;
}
.klein .linksbtn {
links: 0;
}
.klein .rechtsbtn {
rechts: 0;
}
.small>.list>ul>li{
Listenstil: keiner;
schweben: links;
Breite: 250px;
}
.Liste{
Breite: 250px;
Anzeige: Inline-Block;
Textausrichtung: links;
Überlauf: versteckt;
}
.list_ul{
Breite: 500px;
Überlauf: versteckt;
Höhe: automatisch;
Übergang: alle 0,5 s linear;
}
.small-li{
Anzeige: Inline-Block;
Breite: 54px;
Höhe: 58px;
Rand: 10px 0;
Rand: 2px durchgehend transparent;
}
.small-li> img{
Breite: 100 %;
Höhe: 100 %;
}
.groß{
Position: absolut;
oben: 0;
links: 350px;
Höhe: 400px;
Breite: 350px;
Rand: 1px, durchgezogener Gainsboro;
Hintergrundbild: URL (./img/big8.jpg);
/*Hintergrundgröße: 350px 400px;*/
Anzeige: keine;
/*Hintergrundwiederholung: keine Wiederholung ;*/
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box" >
<div Klasse="Mitte" Stil="Breite:350px;Höhe:400px;">
<div Klasse = "hover_ceng" Stil = "Breite: 153,508px; Höhe: 200px;"></div>
<img id="middleimg" src="./img/middle.5.jpg" alt=""/>
</div>
<div Klasse="klein">
<span class="leftbtn"><</span>
<div Klasse="Liste">
<ul Klasse="Liste_ul">
<li>
<div Klasse="small-li" data-middle="middle.5.jpg" data-big="big5.jpg">
<img src="./img/small5.jpg" alt=""/>
</div>
<div Klasse="small-li" data-middle="middle.6.jpg" data-big="big6.jpg">
<img src="./img/small6.jpg" alt=""/>
</div>
<div Klasse="small-li" data-middle="middle.7.jpg" data-big="big7.jpg">
<img src="./img/small7.jpg" alt=""/>
</div>
<div Klasse="small-li" data-middle="middle.8.jpg" data-big="big8.jpg">
<img src="./img/small8.jpg" alt=""/>
</div>
</li>
<li>
<div Klasse="small-li" data-middle="middle.1.jpg" data-big="big1.jpg">
<img src="./img/small1.jpg" alt=""/>
</div>
<div Klasse="small-li" data-middle="middle.2.jpg" data-big="big2.jpg">
<img src="./img/small2.jpg" alt=""/>
</div>
<div Klasse="small-li" data-middle="middle.3.jpg" data-big="big3.jpg">
<img src="./img/small3.jpg" alt=""/>
</div>
<div Klasse="small-li" data-middle="middle.4.jpg" data-big="big4.jpg">
<img src="./img/small4.jpg" alt=""/>
</div>
</li>
</ul>
</div>
<span class="rightbtn">> </span>
</div>
<div Klasse="groß">
<!--<img src="./img/big6.jpg" alt=""/>-->
</div>
</div>
<Skript>
var smallblack=document.getElementsByClassName("small-li");
var middleimage = document.getElementById("middleimg");
var middleblock=document.getElementsByClassName("middle")[0];
var ceng = document.getElementsByClassName("hover_ceng")[0];
var box_b = document.getElementsByClassName("box")[0];
var bigbang=document.getElementsByClassName ("big")[0];
var leftbutton = document.getElementsByClassName ("leftbtn")[0];
var rightbutton = document.getElementsByClassName ("rightbtn")[0];
var listmeun=document.getElementsByClassName ("list_ul")[0];
var vorher=null;
für(var i =0;i<smallblack.length;i++){
kleinesschwarz[i].onmouseenter=function(){
wenn(befortu)befortu.style.borderColor="transparent";
dieser.Stil.borderColor="pink";
vorher =dies;
//Das mittlere Bild wird angezeigt middleimage.src="./img/" + this.getAttribute("data-middle");
//Das große Ganze im Blick behalten bigbang.style.backgroundImage="url(./img/"+this.getAttribute('data-big')+")";
}
}
//Mauseingabeereignisvariable hinzufügen
mittlererblock.onmouseenter=function(){
this.style.cursor = "bewegen";
ceng.style.display = "Block";
bigbang.style.display = "Block";
}
mittlererblock.onmouseleave=Funktion(){
ceng.style.display="keine";
bigbang.style.display = "keine";
}
mittlererblock.onmousemove = Funktion(m) {
var pageX = m.pageX || m.clientX;
var pageY = m.pageY || m.clientY;
//Holen Sie sich den Offset des aktuellen Elements offsetLeft linker Offset offsetTop oberer Offset this.offsetHeight, this.offsetWidth
SeiteX = SeiteX -(box_b.offsetLeft+parseInt (ceng.style.width)/2);
SeiteY = SeiteY -(box_b.offsetTop+parseInt (ceng.style.height)/2);
var bigleft = parseInt (dieser.Stil.Breite) – parseInt (ceng.Stil.Breite);
var bigtop = parseInt (dieser.Stil.Höhe) – parseInt (ceng.Stil.Höhe);
SeiteX = SeiteX <=0? 0:(SeiteX >=großlinks? großlinks:SeiteX);
SeiteY = SeiteY <=0? 0:(SeiteY >=Bigtop? Bigtop:SeiteY);
ceng.style.left= SeiteX + "px";
ceng.style.top= SeiteY + "px";
//Wenn die Maus bewegt wird, bewegt sich das große Bild entsprechend bigbang.style.backgroundPosition = (-pageX * 2,28) + "px " + (-pageY * 2) + "px ";
}
linkeTaste.beimKlick = Funktion(){
listmeun.style.marginLeft =0+"px";
}
rechteTaste.beimKlick = function(){
listmeun.style.marginLeft =-250+"px";
}
</Skript>
</body>
</html>Das größte Bild konnte nicht von der Originalwebsite heruntergeladen werden, daher könnte der Effekt beim Vergrößern störend sein und ich muss lernen, das Bild zu skalieren.
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:
|
<<: Änderung der Standardquelldatei sources.list des Ubuntu20.04 LTS-Systems
>>: Zusammenfassung der Wissenspunkte zum Abdecken von Indizes in MySQL
Artikel empfehlen
Eine vorläufige Studie zu zusammengesetzten Primärschlüsseln und gemeinsamen Primärschlüsseln in SQL-Anweisungen
1. Zusammengesetzter Primärschlüssel Der sogenann...
Lösung zum Einfügen eines Formulars mit einer Leerzeile oben und unten
Ich weiß nicht, ob Ihnen beim Erstellen einer Webs...
Detailliertes Tutorial zum verteilten Betrieb von JMeter in der Docker-Umgebung
1. Erstellen Sie das Basisimage von jmeter Das Do...
Zusammenfassung der allgemeinen MySQL-Benchmark-Befehle
mysql.lap Allgemeine Parameterbeschreibung –auto-...
Implementierungsideen und Schritte für die MySQL-Master-Slave-Konstruktion (mehrere Master und ein Slave)
Hintergrund: Da die Projekte des Unternehmens dem...
MySQL 5.7-Installation Der MySQL-Dienst kann nicht gestartet werden, meldet jedoch keine Fehler
Es gibt zwei Möglichkeiten, MySQL 5.7 zu installi...
Zwei Möglichkeiten zum vollständigen Löschen von Benutzern unter Linux
Linux-Betrieb Experimentelle Umgebung: Centos7-Vi...
Analyse und Meinungen zur Designstruktur des großen Bildes auf der Homepage der Taobao Mall (Bild)
Nachdem ich das letzte Mal die Taobao-Detailseite ...
So erstellen Sie Ihren eigenen nativen JavaScript-Router
Inhaltsverzeichnis Vorwort Einführung JavaScript ...
So implementieren Sie die Eingabeaufforderung für das H5-Eingabefeld + die Eingabeaufforderung für das normale Textfeld
XML/HTML-CodeInhalt in die Zwischenablage kopiere...
So implementieren Sie die Ajax-Kontrolle gleichzeitiger Anforderungen basierend auf JS
Inhaltsverzeichnis Vorwort Ajax seriell und paral...
Detaillierte Erläuterung des neuesten IDEA-Prozesses zum schnellen Bereitstellen und Ausführen von Docker-Images
Hintergrund Verwenden Sie Idea mit Docker, um den...
HTML-Sonderzeichen-Konvertierungstabelle
Charakter Dezimal Zeichennummer Entitätsname --- ...
Perfekte Lösung für das Problem des Verbindungsfehlers nach der MySQL-Client-Autorisierung
Stellen Sie die MySQL-Umgebung lokal bereit (192....
10 SQL-Anweisungsoptimierungstechniken zur Verbesserung der MySQL-Abfrageeffizienz
Die Ausführungseffizienz der MySQL-Datenbank hat ...