it_javascript スキルを保存する代わりに、JavaScript に基づいて画像ポップアップ ウィンドウを実装する

サムネールをクリックすると出てくるプラグインを入れたいと思っていたのですが、調べてみるとほとんどがPHPで作られており、プラグインの使い方やインストールが非常に面倒だったので、オンラインでいくつかのデモをチェックし、純粋な JS プラグインを自分で実装しました。

実装のアイデアは、画像の onclick イベントをフックする関数を作成し、その関数の body に div 要素を追加し、その要素に受信画像オブジェクトを入れ、同時にリッスンすることです。クリックがキャプチャされたときに div の onclick イベントに追加し、ポップアップ div を閉じます (実際には非表示にします)。

関数の初期化時にページ上のすべての img 要素を収集し、各 img 要素に onclick="picHook(this)" 属性を追加することで、この関数は画像がクリックされたときに自動的に div を作成できます。背景を取得し、クリックされた画像の幅と高さを取得し、画像と同じサイズの新しい div を生成して画像を表示します。マスクが再度クリックされると、フック イベントが再び応答し、マスクとイメージ div のスタイルが none に設定され、ポップアップ イメージが閉じます。

言うのは簡単ですが、実行するのはさらに簡単です。実装するのに必要な関数は 1 つだけです。

話すのは安い、私のコードを見せてください:

<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>

このコードをページの先頭に保存し、本文の onload イベントを picHook() 関数にバインドします。画像をクリックすると、ページ上に大きな画像のポップアップが表示されます。

主に私が CSS にあまり慣れていないため、まだ小さなバグがあり、div スタイルが少し見苦しくなっています。

CSS スタイルを js で直接宣言しているため、別の CSS ファイルを作成する必要はありません。

CSS について考えてスタイルを最適化する前に、このセクションが終了するまで待ってください。画像ポップアップ ウィンドウを保存する代わりに JavaScript を使用して実装することについてこの記事で共有した知識が役立つことを願っています。