点击图片放大效果

css：

<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%;
    width：100%;//图片宽度，可用像素和%
        }
    </style>

   

html：

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

   

js：

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

转载：感谢您对正月二十四工作室的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源正月二十四工作室”。

很赞哦！ ()