学习笔记

精准传达 • 价值共享

洞悉互联网前沿资讯,探寻网站营销规律

查看其它板块

网页里点击图片放大成原图 在点击就变小 恢复原状【多种方法】

作者:狐灵科技 | 2019-12-29 17:35 |点击:

在做企业网站的时候有的有的客户的图片比较大 网页的框架比较小 需要点击图片方法

之前写过一个教程:JS让网页文章里的所有图片都可以新窗口打开这个教程不太利于用户体验 并且手机点击图片也有出现问题

接下来可以用这篇文章 

另外也可以参考:点击图片放大特效代码,再点击恢复原状【多种方法】


图片的实际大小为1920x1080,我们先把宽度限制在300px,点击后图片还原到100%(如果浏览器窗口高度小于图片的真实高度,这样的情况下,图片虽然宽度还原到100%,但是所显示的大小依然取决于浏览器窗口的高度),如果想要图片根据父框架的宽度进行放大,请点击这里:
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.  

 

如没特殊注明,文章均为狐灵科技原创,转载请注明  https://www.hulingweb.cn/qxpp/xuexibiji/778.html
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

网站设计 品牌营销

多一份参考,总有益处

联系狐灵科技,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:023-68168040 / 大客户专线:15523356218