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
Erläutern Sie die Bereitstellung und Konfiguration des Clickhouse Docker-Clusters anhand von Beispielen.
Inhaltsverzeichnis Vorne geschrieben Umgebungsber...
HTML-Tags dl, dt, dd zum Erstellen einer Tabelle vs. Tabellenerstellungstabelle
Dadurch werden nicht nur die Kosten für die Entwic...
Zusammenfassung gängiger Toolbeispiele in MySQL (empfohlen)
Vorwort Dieser Artikel stellt hauptsächlich die r...
Beispielcode für Django+Vue-Registrierung und -Anmeldung
registrieren Das Front-End verwendet Axios in Vue...
MySQL-Beispiel für die Konvertierung von Spalten in Zeilen und die Gruppierung nach Jahr und Monat
Wie unten dargestellt: SELECT Anzahl(DISTINCT(a.r...
So konfigurieren Sie inländische Quellen in CentOS8 yum/dnf
CentOS 8 hat das Installationsprogramm für Softwa...
Ubuntu MySQL 5.6 Version entfernen/installieren/Kodierungskonfigurationsdatei konfigurieren
1. MySQL entfernen a. sudo apt-get autoremove --p...
Grundlegende Verwendung der JS-Datumssteuerung My97DatePicker
My97DatePicker ist ein sehr flexibles und benutze...
MySQL-Daten einfügen, aktualisieren und löschen Details
Inhaltsverzeichnis 1. Einfügen 2. Aktualisierung ...
Beitrag zur Übermittlung von HTML-Daten_PowerNode Java Academy
Zu den vom HTTP/1.1-Protokoll angegebenen HTTP-An...
Zabbix konfiguriert DingTalks Alarmfunktion mit Bildern
Umsetzungsideen: Zunächst müssen die Alarminforma...
WeChat Mini-Programm: Position des Videofeuers zufällig
In diesem Artikel wird der spezifische Code zur z...
Können Sie alle Testfragen zum Erstellen der Webseite beantworten?
Fragen zum Webdesign. Können Sie alle beantworten...
Drei Möglichkeiten zur Kommunikation zwischen React-Komponenten (einfach und benutzerfreundlich)
Inhaltsverzeichnis 1. Kommunikation zwischen Elte...
JavaScript Canvas zeichnet dynamische Drahtgittereffekte
In diesem Artikel wird der spezifische Code des d...