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
Docker ermöglicht den nahtlosen Aufruf von Shell-Befehlen zwischen Container und Host
Wie unten dargestellt: nsenter -t 1 -m -u -n -i s...
MySQL 5.5.56-Version (Installation von Binärpaketen) benutzerdefinierter Installationspfad-Schrittdatensatz
Installationspfad: /application/mysql-5.5.56 1. V...
Diagramm des Tutorials zur schnellen Installation und Konfiguration des Linux-Systems MySQL8.0.19
Inhaltsverzeichnis 1. Umgebung Einführung 2. Inst...
Zusammenfassung wichtiger Breakpoint-Debugging-Techniken für JavaScript (empfohlen)
Inhaltsverzeichnis Warum einen Debugger verwenden...
CSS implementiert fünf gängige 2D-Transformationen
2D-Transformationen in CSS ermöglichen es uns, ei...
Detaillierte Zusammenfassung der Übermittlungsmethoden für Webformulare
Sehen wir uns zunächst verschiedene Möglichkeiten...
Docker-Lernen: Die spezifische Verwendung von Container-Containern
Container sind ein weiteres Kernkonzept von Docke...
Beispiele für die korrekte Verwendung von Schnittstellen- und Typmethoden in TypeScript
Inhaltsverzeichnis Vorwort Schnittstelle Typ Anha...
Leitfaden zur effizienten Nutzung von MySQL-Indizes
Vorwort Ich glaube, die meisten Leute haben MySQL...
So verwenden Sie Docker-Compose, um Django-Anwendungen offline bereitzustellen
Inhaltsverzeichnis Installieren Sie Docker-ce für...
Verwenden Sie einfaches jQuery + CSS, um einen benutzerdefinierten Tooltip für Tag-Titel zu erstellen
Einführung Verwenden Sie einfaches jQuery+CSS, um ...
Linux CentOS 6.5: Anleitung zum Deinstallieren, Tarieren und Installieren von MySQL
Deinstallieren Sie das vom System bereitgestellte...
Einführung in die Verwendung gängiger Dockerfile-Befehle
Inhaltsverzeichnis 01 CMD 02 EINSTIEGSPUNKT 03 AR...
Beispiel für einen WeChat-Applet-Rechner
In diesem Artikel wird der spezifische Code des W...
Das Problem, dass beim Verbinden mit der MySQL-Datenbank in Idea chinesische Zeichen verstümmelt erscheinen
Problem: Bei Verwendung von JDBC zur Verbindung m...