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
HTML-Hyperlinks im Detail erklärt
Hyperlink Hyperlinks sind die am häufigsten verwen...
So installieren Sie ELK in Docker und implementieren die Protokollanalyse im JSON-Format
Was ist ELK? ELK ist ein vollständiger Satz von L...
Beispielcode zur Implementierung eines Foto-Stacking-Effekts mit CSS
Ergebnisse erzielen Schritt 1. Ursprüngliche inde...
Detaillierte Erläuterung des Kapselungsbeispiels für Netzwerkanforderungen
Exportstandard ({ URL (URL = URL = URL), Methode ...
Tutorial zur grafischen Installation der MySQL 8.0.15 WinX64-Dekomprimierungsversion
Jedes Mal, wenn ich das System installiert habe, ...
Responsive Layout-Zusammenfassung (empfohlen)
Grundkenntnisse der responsiven Layoutentwicklung...
Detaillierte Erläuterung der Idee zur Implementierung der Funktion zum Anzeigen und Verbergen von Passwörtern in Vue
Wirkung: Ideen: Verwenden Sie das Eingabetypattri...
So zeigen Sie den Kennwortablauf unter Linux an und konfigurieren ihn
Mit den richtigen Einstellungen können Sie Linux-...
Prinzip der MySQL-Paging-Analyse und Effizienzverbesserung
Prinzip der MySQL-Paging-Analyse und Effizienzver...
Natives JS zur Implementierung des Flugzeug-Kriegsspiels
In diesem Artikelbeispiel wird der spezifische JS...
So implementieren Sie geplante MySQL-Aufgaben zur Datensicherung unter Linux
Vorwort Backup ist die Grundlage der Notfallwiede...
Detaillierte Erklärung, wie Zabbix den Master-Slave-Status von MySQL überwacht
Nach dem Einrichten des MySQL-Master-Slaves wisse...
Detaillierte Erklärung der allgemeinen For-Schleife in JavaScript-Anweisungen
Es gibt viele Schleifenanweisungen in JavaScript,...
Informieren Sie sich, wie HTML und Ressourcen geladen werden
Der gesamte Inhalt dieses Blogs ist unter Creativ...
Tutorial zur Installation von Pycharm und Ipython unter Ubuntu 16.04/18.04
Unter Ubuntu 18.04 1. sudo apt install python ins...