html实现点击图片放大功能

最新推荐文章于 2024-06-07 13:51:40 发布

Tom不秃

最新推荐文章于 2024-06-07 13:51:40 发布

阅读量1.1w

点赞数 4

分类专栏：前端文章标签： js html5 css

本文链接：https://blog.csdn.net/da13122318861/article/details/103823092

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

<html>
<head>
    <style>
        .tmpContainer {z-index:101;position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center;}
        .bg {z-index:100; position: fixed; left:0; top:0; width:100%;}
    </style>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="bg"></div><!--遮罩层-->
<div class="amplify">
    <img src="img.jpg"/>
</div>
<script>
    $(document).ready(function () {
        var imgsObj = $('.amplify img');//获取需要放大的图像
        if(!imgsObj){
            return;
        }
        $.each(imgsObj,function(){
            $(this).click(function(){
                var tmpContainer = $('<div class=tmpContainer></div>');
                var currImg = $(this);
                coverLayer(1);
                with(tmpContainer){
                    appendTo("body");
                    var windowWidth=$(window).width();
                    var windowHeight=$(window).height();
                    //获取原图宽度、高度
                    var originalImg = new Image();
                    originalImg.src =currImg.attr("src") ;
                    var currImgWidth= originalImg.width;
                    var currImgHeight = originalImg.height;
                    if(currImgWidth<windowWidth){//图片宽度较小的时候，保留原图
                        if(currImgHeight<windowHeight){
                            var topHeight=(windowHeight-currImgHeight)/2;
                            if(topHeight>35){  //兼容微信浏览器，使图片高度上居中显示在整个手机屏幕中
                                topHeight=topHeight-35;
                                css('top',topHeight);
                            }else{
                                css('top',0);
                            }
                            html('< img src=' + currImg.attr('src') + ' border=0>');
                        }else{
                            css('top',0);
                            html('< img src=' + currImg.attr('src') + ' height='+windowHeight+'  border=0>');
                        }
                    }else{
                        var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
                        if(currImgChangeHeight<windowHeight){
                            var topHeight=(windowHeight-currImgChangeHeight)/2;
                            if(topHeight>35){
                                topHeight=topHeight-35;
                                css('top',topHeight);
                            }else{
                                css('top',0);
                            }
                            html('< img src=' + currImg.attr('src') + ' width='+windowWidth+'  border=0>');
                        }else{
                            css('top',0);
                            html('< img src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+' border=0>');
                        }
                    }
                }
                tmpContainer.click(function(){
                    $(this).remove();
                    coverLayer(0);
                });
            });
        });

        //使用禁用蒙层效果
        function coverLayer(tag){
            with($('.bg')){
                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>
</body>
</html>

Tom不秃

关注

4
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
html实现点击图片放大功能

<html> <head> <style> .over {position: fixed; left:0; top:0; width:100%; z-index:100;} .tempContainer {position:fixed; width:100%; margin-right:0p...
复制链接

扫一扫