1.樣式

<style>
.container {
    z-index:101;
    position:fixed; 
    width:100%; 
    margin-right:0px;
    margin-left:0px; 
    text-align:center;
}

.bigimg {
    z-index:100; 
    position: fixed; 
    left:0; 
    top:0; 
    width:100%;
}
</style>

2.圖片和遮罩層

<div class="main">
    <img src="mango.jpg"/>
</div>
<div class="bigimg"></div><!--遮罩層-->

3.效果實現(xiàn)代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-508748.html

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        var imgObj = $('.main img');//點擊的圖片
    
        $.each(imgObj,function(){
            $(this).click(function(){
                var container = $('<div class=container></div>');
                var myImg = $(this);
                coverLayer(1);
                with(container){
                    appendTo("body");
                    var windowWidth = $(window).width();
                    var windowHeight = $(window).height();
                    //獲取原圖寬度、高度
                    var originalImg = new Image();
                    originalImg.src =myImg.attr("src");
                    var myImgWidth= originalImg.width;
                    var myImgHeight = originalImg.height;

                    if(myImgWidth < windowWidth){
                        if(myImgHeight < windowHeight){
                            var topHeight=(windowHeight-myImgHeight)/2;
                            if(topHeight>35){
                                topHeight=topHeight-35;
                                css('top',topHeight);
                            }else{
                                css('top',0);
                            }
                            html('<img src=' + myImg.attr('src') + ' border=0 />');
                        }else{
                            css('top',0);
                            html('<img src=' + myImg.attr('src') + ' height='+windowHeight+' border=0 />');
                        }
                    }else{
                        var myImgChangeHeight=(myImgHeight*windowWidth)/myImgWidth;
                        if(myImgChangeHeight < windowHeight){
                            var topHeight = (windowHeight - myImgChangeHeight)/2;
                            if(topHeight>35){
                                topHeight=topHeight-35;
                                css('top',topHeight);
                            }else{
                                css('top',0);
                            }
                            html('<img src=' + myImg.attr('src') + ' width='+windowWidth+' border=0 />');
                        }else{
                            css('top',0);
                            html('<img src=' + myImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+' border=0 />');
                        }
                    }
                }
                container.click(function(){
                    $(this).remove();
                    coverLayer(0);
                });
            });
        });

        //使用禁用蒙層效果
        function coverLayer(tag){
            with($('.bigimg')){
                if(tag){
                    css('height',$(document).height());
                    css('display','block');
                    css('opacity',1);
                    css("background-color","#fff");
                    css("background-color","rgba(0,0,0,0.6)" );  //蒙層透明度
                }else{
                    css('display','none');
                }
            }
        }
    });
</script>

到了這里，關(guān)于HTML實現(xiàn)圖片點擊放大效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！