自拍亚洲一区欧美另类,亚洲成人影院,亚洲午夜久久久久妓女影院,最近中文字幕高清中文字幕无,亚洲熟妇av一区二区三区漫画

學(xué)習(xí)筆記

精準(zhǔn)傳達(dá) ? 價值共享

洞悉互聯(lián)網(wǎng)前沿資訊,探尋網(wǎng)站營銷規(guī)律

網(wǎng)頁里點擊圖片放大成原圖 在點擊就變小 恢復(fù)原狀【多種方法】

作者:狐靈科技 | 2019-12-29 17:33 |點擊:

在做企業(yè)網(wǎng)站的時候有的有的客戶的圖片比較大 網(wǎng)頁的框架比較小 需要點擊圖片方法

之前寫過一個教程:JS讓網(wǎng)頁文章里的所有圖片都可以新窗口打開這個教程不太利于用戶體驗 并且手機(jī)點擊圖片也有出現(xiàn)問題

接下來可以用這篇文章 

另外也可以參考:點擊圖片放大特效代碼,再點擊恢復(fù)原狀【多種方法】


圖片的實際大小為1920x1080,我們先把寬度限制在300px,點擊后圖片還原到100%(如果瀏覽器窗口高度小于圖片的真實高度,這樣的情況下,圖片雖然寬度還原到100%,但是所顯示的大小依然取決于瀏覽器窗口的高度),如果想要圖片根據(jù)父框架的寬度進(jìn)行放大,請點擊這里:
http://www.dedecmsok.com/html/n171.html


CSS

 

  1.  <style>
            #popup{
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                text-align: center;
                display: none;
    z-index: 9999999;
            }
            #popup .bg{
                background-color: rgba(0,0,0,0.5);
                width: 100%;
                height: 100%;
            }
            @media \0screen\,screen\9 {
                #popup .bg{
                    background-color:#000000;
                    filter:Alpha(opacity=50);
                    position:static;
                }
                #popup .bg img{
                    position: relative;
                }
            }
            #popup img{
                margin-top: 2%;
                max-height: 90%;
            }
        </style>
  2.  

 

html

<div id="dedecmsok">
    <img src="111.jpg" />
    <img src="222.jpg" />
</div>
<div id="popup">
  <div class="bg">
    <img src=""/>
  </div>
</div>



javascript


  1. <script type="text/javascript">
        var imgs = document.getElementById("dedecmsok").getElementsByTagName("img");
        var lens = imgs.length;
        var popup = document.getElementById("popup");
     
        for(var i = 0; i < lens; i++){
            imgs[i].onclick = function (event){
                event = event||window.event;
                var target = document.elementFromPoint(event.clientX, event.clientY);
                showBig(target.src);
            }
        }
        popup.onclick = function (){
            popup.style.display = "none";
        }
        function showBig(src){
            popup.getElementsByTagName("img")[0].src = src;
            popup.style.display = "block";
        }
    </script>
  2.  

 

如沒特殊注明,文章均為狐靈科技原創(chuàng),轉(zhuǎn)載請注明?? "網(wǎng)頁里點擊圖片放大成原圖 在點擊就變小 恢復(fù)原狀【多種方法】
多一份免費(fèi)策劃方案,總有益處。

請直接添加技術(shù)總監(jiān)微信聯(lián)系咨詢

網(wǎng)站設(shè)計 品牌營銷

多一份參考,總有益處

聯(lián)系狐靈科技,免費(fèi)獲得專屬《策劃方案》及報價

咨詢相關(guān)問題或預(yù)約面談,可以通過以下方式與我們聯(lián)系

業(yè)務(wù)熱線:15082661954 / 大客戶專線:15523356218