HTML实现图片点击放大效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML实现图片点击放大效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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.效果实现代码文章来源地址https://www.toymoban.com/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>

到了这里，关于HTML实现图片点击放大效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！