HTML实现图片点击放大效果

最新推荐文章于 2024-10-13 20:55:11 发布

芒果芒果丶

最新推荐文章于 2024-10-13 20:55:11 发布

阅读量4k

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/mangobot/article/details/129853690

版权

该代码段展示了如何使用CSS和JavaScript（jQuery）来创建一个响应式的图片查看功能。当用户点击图片时，图片会在一个固定定位的容器中放大显示，同时添加一个半透明的遮罩层覆盖整个页面。代码考虑了窗口大小和图片尺寸的比例，以适应不同屏幕尺寸，并提供了一种禁用遮罩层的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.效果实现代码

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