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

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

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

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

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

作者:狐靈科技 | 2019-12-29 17:33 |點(diǎn)擊:

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

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

接下來(lái)可以用這篇文章 

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


圖片的實(shí)際大小為1920x1080,我們先把寬度限制在300px,點(diǎn)擊后圖片還原到100%(如果瀏覽器窗口高度小于圖片的真實(shí)高度,這樣的情況下,圖片雖然寬度還原到100%,但是所顯示的大小依然取決于瀏覽器窗口的高度),如果想要圖片根據(jù)父框架的寬度進(jìn)行放大,請(qǐng)點(diǎ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)載請(qǐng)注明?? "網(wǎng)頁(yè)里點(diǎn)擊圖片放大成原圖 在點(diǎn)擊就變小 恢復(fù)原狀【多種方法】
多一份免費(fèi)策劃方案,總有益處。

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

網(wǎng)站設(shè)計(jì) 品牌營(yíng)銷

多一份參考,總有益處

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

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

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