Implémentation d'une fenêtre contextuelle de clic sur l'image basée sur JavaScript au lieu des compétences saving_javascript

J'ai toujours voulu installer un plug-in qui permette aux vignettes d'apparaître lorsque vous cliquez dessus, mais après recherche, presque toutes sont réalisées en PHP. L'utilisation et l'installation du plug-in sont extrêmement lourdes, donc je. J'ai vérifié quelques démos en ligne et implémenté un plugin popup Picture pur.

L'idée de l'implémentation est d'écrire une fonction qui accroche l'événement onclick de l'image, ajoute un élément div au corps dans la fonction, puis place l'objet image entrant dans l'élément, et en même temps écoute à l'événement onclilck du div. Lorsque le clic est capturé, puis fermez (masquez réellement) le div contextuel.

En collectant tous les éléments img sur la page lorsque la fonction est initialisée, puis en ajoutant l'attribut onclick="picHook(this)" à chaque élément img, cette fonction peut créer automatiquement un div lorsque l'on clique sur l'image. arrière-plan, obtenez la largeur et la hauteur de l'image cliquée et générez un nouveau div avec la même taille que l'image pour afficher l'image. Lorsque vous cliquez à nouveau sur le masque, l'événement hook répond à nouveau, le style du masque et de l'image div est défini sur aucun et l'image contextuelle est fermée.

C'est facile à dire, mais c'est encore plus facile à faire. C'est si simple que vous n'avez besoin que d'une seule fonction pour l'implémenter.

parler ne coûte pas cher, montre-toi mon 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>

Enregistrez ce code dans l'en-tête de la page, puis liez l'événement onload du corps à la fonction picHook(). Vous pouvez également réaliser une grande image pop-up sur votre page lorsque vous cliquez sur l'image.

Il y a encore un petit bug, principalement parce que je ne suis pas très familier avec CSS, ce qui rend le style div un peu moche.

Je déclare le style css directement dans js, je n'ai donc pas besoin de créer un autre fichier css.

Attendez la fin de cette section avant de penser au CSS et d'optimiser le style. J'espère que les connaissances partagées dans cet article sur l'utilisation de JavaScript pour implémenter des fenêtres contextuelles d'images au lieu de les enregistrer vous seront utiles.