画像ポップアップを実現する Pure Javascript_html/css_WEB-ITnose

サムネイルをクリックすると出てくるプラグインを導入したいと思っていたのですが、調べてみるとほとんどがPHPでできていて、プラグインの使い方やインストールが非常に面倒でした。そこで、オンラインでいくつかのデモを確認し、Pure 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を考えてスタイルを最適化します。

気に入ったら受け取ってください。

下の画像をクリックしてテストし、効果を確認できます: