点击图片放大特效代码,全屏显示,再点击恢复原状【多种方法】

2017-12-05 建站知识 浏览 手机预览
文章来源:http://www.dedecmsok.com/html/n172.html

我们先来看看效果如何,点击图片试一试。
图片的实际大小为1920x1080,我们先把宽度限制在300px,点击后图片还原到100%(如果浏览器窗口高度小于图片的真实高度,这样的情况下,图片虽然宽度还原到100%,但是所显示的大小依然取决于浏览器窗口的高度),如果想要图片根据父框架的宽度进行放大,请点击这里:
http://www.dedecmsok.com/html/n171.html


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%;
        }
    </style>


html

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


javascript

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


原文地址:http://www.dedecmsok.com/html/n172.html
  • 如果你的问题还没有解决,可以点击页面右侧的“ ”,站长收到问题后会尽快回复解决方案到你的邮箱。
  • 创造始于问题,有了问题才会思考,有了思考,才有解决问题的方法,才有找到独立思路的可能。 —— 陶行知