So verwenden Sie js, um die Grundfunktionen der Bildbibliothek zu implementieren:
Wenn Sie auf einen Link klicken, können Sie auf dieser Seite bleiben, um die Bilder anzusehen, anstatt zu einem anderen Fenster zu wechseln.
Wenn Sie auf einen Link klicken, können Sie dieses Bild und die Originalbildliste gleichzeitig auf dieser Seite sehen. Apache PHP MySQL
Bildergalerie HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="static/layout.css" media="screen" />
</head>
<body>
<h1>Avengers</h1>
<ul>
<li>
<a href="./images/1.jpg" title="avengers1" onclick="showPic(this); return false;">AAAAR1</a>
</li>
<li>
<a href="./images/2.jpg" title="avengers2" onclick="showPic(this); return false;">AAAAR2</a>
</li>
<li>
<a href="./images/3.jpg" title="avengers3" onclick="showPic(this); return false;">AAAAR3</a>
</li>
<li>
<a href="./images/4.jpg" title="avengers4" onclick="showPic(this); return false;">AAAAR4</a>
</li>
</ul>
<img id="placeholder" src="./images/5.jpg" alt="AAAAR5" />
<p id="description">Choose an image.</p>
<script src="static/showPic.js"></script>
</body>
</html>Nach dem Login kopieren
CSS-Rendering-Datei:
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color:#333;
background-color: transparent;
}
a {
color:#60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style:none;
}
img {
display: block;
clear: both;
}Nach dem Login kopieren
Vorgeschlagene Lösung:
Übergeben Sie eine Platzhalter-Bildmethode zum Reservieren Ein Suchbereich für Bilder auf dieser Homepage.
Wenn auf einen Link geklickt wird, wird das Standardverhalten dieser Webseite abgefangen.
Wenn auf einen Link geklickt wird, ersetzen Sie das Platzhalterbild durch das Bild, das diesem Link entspricht.
Wählen Sie zunächst ein Bild als Platzhalter aus:
<img id="placeholder" src="./images/5.jpg" alt="AAAAR5" />
Nach dem Login kopieren
Um das Platzhalterbild durch das Bild zu ersetzen, das Sie anzeigen möchten, müssen Sie dessen src-Attribut ändern. Die setAttribute-Funktion in js kann dies tun. Mit dieser Funktion können Sie eine js-Funktion schreiben, um das Problem zu lösen.
function showPic(whichpic)
Nach dem Login kopieren
Diese Funktion akzeptiert nur einen Bildlink-Parameter zum Konvertieren des Bildes. Als Elementknoten kann whichpic die getAttribute-Funktion verwenden, um sein href-Attribut abzurufen:
var source = whichpic.getAttribute("href");Nach dem Login kopieren
Dann das Platzhalterbild abrufen:
var placeholder = document.getElemntById("placeholder");Nach dem Login kopieren
Nachdem Sie das Platzhalterbildobjekt abgerufen haben, können Sie die Eigenschaften des Bitmap-Objekt gesetzt, d. h. das entsprechende Bild wird ersetzt.
placeholder.setAttribute("src", source);Nach dem Login kopieren
Vollständige Funktion:
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
}Nach dem Login kopieren
Der nächste Schritt besteht darin, diese js-Funktion mit dem Markup-Dokument zu kombinieren.
Ereignisbehandlungsfunktion: Die Funktion der Ereignisbehandlungsfunktion besteht darin, bestimmten JS-Code aufzurufen, wenn ein bestimmtes Ereignis auftritt.
Hier möchten Sie eine Aktion auslösen, wenn der Benutzer auf einen Link klickt, daher müssen Sie den Onclick-Ereignishandler verwenden.
Die showPic-Funktion erfordert einen Parameter: einen Elementknotenparameter mit einem href-Attribut. Sie können hier das Schlüsselwort this verwenden, das auf das aktuelle Label-Element verweist.
In ähnlicher Weise möchte ich auch verhindern, dass beim Klicken auf den Link zu einem anderen Fenster gesprungen wird. Daher muss ich das Standardverhalten blockieren, wenn auf den Link geklickt wird, und nur das durch die js-Funktion ausgelöste Bildersetzungsverhalten ausführen.
Hier können Sie der js-Funktion einen Rückgabewert von false hinzufügen, sodass die Onclick-Funktion davon ausgeht, dass auf den Link nicht geklickt wurde, und kein neues Fenster öffnet.
Spezifischer Code:
<a href="./images/1.jpg" title="avengers1" onclick="showPic(this); return false;">AAAAR1</a>
Nach dem Login kopieren
Das Schlüsselwort this bezieht sich hier auf den Elementknoten .
Damit ist die von der Bildbibliothek benötigte Funktion abgeschlossen.
Diese Funktion erweitern:
Ich möchte auch die Beschreibung des Bildes wechseln, wenn ich auf die Seite klicke. Jedes Bild im Bildbibliotheksdokument hat ein Titelattribut. Die gleiche Idee:
var text = whichpic.getAttribute("title");Nach dem Login kopieren
erhält zuerst das Titelattribut und ersetzt es dann.
childNodes-Attribut: kann verwendet werden, um alle untergeordneten Elemente eines beliebigen Elements abzurufen.
Angenommen, Sie müssen alle untergeordneten Elemente im Körperelement extrahieren: Überprüfen Sie, wie viele untergeordnete Elemente der Körper hat.
var body_element = document.getElementsByTagName = ("body")[0];
alert(body_element.childNodes.length);Nach dem Login kopieren
[0] bedeutet, dass das erste (und einzige) Körperelement im Array erhalten wird.
Das von der childNodes-Eigenschaft zurückgegebene Array enthält alle Arten von Knoten, nicht nur Elementknoten, tatsächlich ist fast alles im Dokument ein Knoten. Der zurückgegebene Wert ist also sehr groß.
nodeType-Attribut: Verwenden Sie das nodeType-Attribut, um den entsprechenden Knoten zu finden. Der Rückgabewert von nodeType ist jedoch nicht auf Englisch:
element node gibt 1 zurück;
text node gibt 3 zurück;
rrree
übergibt diese Anweisung, um den Knoten anzuzeigen.
Zurück zur hinzuzufügenden Funktion: Fügen Sie zunächst wie beim Bild einen Platzhalter mit einer Textbeschreibung hinzu, legen Sie das ID-Attribut
alert(body_element.nodeType);
Nach dem Login kopieren
fest, platzieren Sie es unter dem Bild und lassen Sie es dann los Der Titel des Bildes ersetzt den Textinhalt:
<p id="description">Choose an image.</p>
Nach dem Login kopieren
nodeValue-Attribut: Wenn Sie den Wert eines Textknotens ändern möchten, müssen Sie das nodeValue-Attribut der DOM-Methode verwenden.
In diesem Beispiel ist der im p-Element enthaltene Textknoten der erste untergeordnete Knoten des
-Elements. Daher muss der Attributwert nodeValue des ersten untergeordneten Knotens abgerufen werden.
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");Nach dem Login kopieren
firstChild- und lastChild-Werte
childNodes[0] kann durch firstChild ersetzt werden, und der letzte untergeordnete Knoten wird durch lastChild dargestellt.
Verwenden Sie schließlich nodeValue, um den Text zu aktualisieren:
Vollständiger Code:
alert(description.childNodes[0].nodeValue);
Nach dem Login kopieren
Übergeben Sie den Wert von text an den Textknoten des
Ziel erreicht ist.
Seiteneffekt:
Verwandte Artikel:
Lokale Vorschaufunktion für JavaScript-Bilder Implementierungsmethode
JavaScript imitiert Pinterest, um die Funktion zum Vorladen von Bildern zu implementieren
Ähnliche Videos:
Verwendung von JavaScript-Li Yanhui Javascript-Video Anleitung
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Grundfunktionen der Bildbibliothek mittels JavaScript (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
