Implementierung eines Bildklick-Popup-Fensters basierend auf JavaScript anstelle von saving_javascript-Kenntnissen

Ich wollte schon immer ein Plug-in installieren, das beim Klicken Miniaturansichten anzeigt, aber nach der Suche werden sie fast alle mit PHP erstellt. Die Verwendung und Installation des Plug-ins ist äußerst umständlich, also habe ich Habe einige Demos online überprüft und ein reines JS-Picture-Popup-Plugin implementiert.

Die Idee der Implementierung besteht darin, eine Funktion zu schreiben, die das Onclick-Ereignis des Bildes einhakt, ein div-Element an den Hauptteil der Funktion anhängt, dann das eingehende Bildobjekt in das Element einfügt und gleichzeitig zuhört zum Onclilck-Ereignis des Divs, wenn der Klick erfasst wird, und dann das Popup-Div schließen (eigentlich ausblenden).

Durch das Sammeln aller IMG-Elemente auf der Seite und das anschließende Hinzufügen des Attributs onclick="picHook(this)" zu jedem IMG-Element kann diese Funktion automatisch ein Div erstellen, wenn auf das Bild geklickt wird Hintergrund, ermitteln Sie die Breite und Höhe des angeklickten Bildes und generieren Sie ein neues Div mit der gleichen Größe wie das Bild, um das Bild anzuzeigen. Wenn erneut auf die Maske geklickt wird, reagiert das Hook-Ereignis erneut und der Stil der Maske und des Bild-Div wird auf „Keine“ gesetzt und das Popup-Bild wird geschlossen.

Es ist leicht zu sagen, aber es ist noch einfacher: Es ist so einfach, dass Sie nur eine Funktion benötigen, um es umzusetzen.

Reden ist günstig, zeig dir meinen Code:

<script>
function picHook(pic){
/*图片对象*/
var imgs = document.getElementsByTagName("img");
/*前景div*/
var light = document.getElementById('light') || document.createElement("div");
/*背景div*/
var bg = document.getElementById('bg') || document.createElement("div");
/*图片放大*/
var s_pic = document.getElementById('s_pic') || document.createElement("img");
/*css对象*/
var css = document.createElement("style");
/*css样式*/
var csstext = '\
.pic_bg{\
position: absolute;\
margin:0 auto; \
top: 0%;\
left: 0%;\
width: 100%;\
padding-bottom: 1000%;\
background-color: black;\
z-index:1001;\
opacity:.80;\
filter: alpha(opacity=80);\
overflow:scroll;\
}\
.pic_div {\
margin-bottom: auto;\
position: fixed;\
left:50%;\
top:50%;\
margin-left:-250px;\
margin-top:-100px;\
z-index:1002;\
}';
/*收集页面所有图片对象*/
for(i=0; i<imgs.length;i++){
imgs[i].setAttribute("onclick", "picHook(this)" );
}
css.type = "text/css";

/*关闭图像*/
if( !pic ){
bg.style.display = light.style.display = "none";
}
/*ie兼容*/
if(css.styleSheet){
css.styleSheet.cssText = csstext;
}else{
css.appendChild(document.createTextNode(csstext));
}
s_pic.setAttribute("id", "s_pic");
s_pic.setAttribute("src", pic.src);
light.setAttribute("id", "light");
light.setAttribute("class", "pic_div");
light.style.display = 'block';
light.appendChild(s_pic);
bg.setAttribute("id", "bg");
bg.setAttribute("class", "pic_bg");
bg.setAttribute("onclick", "picHook()");
bg.style.display = light.style.display;
document.getElementsByTagName("head")[0].appendChild(css); 
document.body.appendChild(bg);
document.body.appendChild(light);
}
</script>

Speichern Sie diesen Code im Kopf der Seite und binden Sie dann das Onload-Ereignis des Körpers an die Funktion picHook(). Sie können auch ein großes Bild-Popup auf Ihrer Seite realisieren, wenn Sie auf das Bild klicken.

Es gibt immer noch einen kleinen Fehler, hauptsächlich weil ich mit CSS nicht sehr vertraut bin, was den div-Stil etwas hässlich macht.

Ich deklariere den CSS-Stil direkt in js, sodass ich keine weitere CSS-Datei erstellen muss.

Warten Sie, bis dieser Abschnitt abgeschlossen ist, bevor Sie über das CSS nachdenken und den Stil optimieren. Ich hoffe, dass Ihnen das in diesem Artikel vermittelte Wissen über die Verwendung von JavaScript zum Implementieren von Bild-Popup-Fenstern statt zum Speichern hilfreich sein wird.