图片点击放大是怎么做的?

之前学习的时候没涉及到这个问题,现在用的框架都是自带放大,感觉自己成了个fw,求一个图片点击放大的方法,类似下面这样,偏后端一点,因为内嵌到markdown中前端真的一窍不通

图片点击放大是怎么做的?

图片点击放大是怎么做的?

给我个接口,我能连通一个世界!
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
最佳答案
  • 点击图片
  • 新建显示层
  • 设置显示层的图片
  • 完事儿
1周前 评论
王小大 1周前
working (楼主) 1周前
zhaojjiang (作者) 1周前
working (楼主) 1周前
zhaojjiang (作者) 1周前
王小大 1周前
working (楼主) 1周前
working (楼主) 1周前
讨论数量: 20

这不是遮罩层吗?前端的伙伴都会吧

1周前 评论
working (楼主) 1周前
my38778570 (作者) 1周前
working (楼主) 1周前
  • 点击图片
  • 新建显示层
  • 设置显示层的图片
  • 完事儿
1周前 评论
王小大 1周前
working (楼主) 1周前
zhaojjiang (作者) 1周前
working (楼主) 1周前
zhaojjiang (作者) 1周前
王小大 1周前
working (楼主) 1周前
working (楼主) 1周前

最简单的实现方式:

<a href="<?= $imgSrc?>" target="_blank"><img src="<?= $imgSrc ?>"></a>
1周前 评论
zhaojjiang 1周前

还是jquery插件来的快一些

1周前 评论

不要求会,但是总多少会点前端就能做。搜jquery zoom

1周前 评论

我的博客 使用的是 jquery.fancybox,只需几行代码即可实现无侵入图片放大功能

效果图

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" async></script>

<script>
$(".post-detail img").each(function() {
    var currentImage = $(this);
    currentImage.wrap("<a href='" + currentImage.attr("src") + "' data-fancybox='lightbox' data-caption='" + currentImage.attr("alt") + "'></a>");
});
</script>
1周前 评论
xiaochong0302

我的开源项目:酷瓜云课堂 是这么实现的,layui layer 的方式:

$('.ke-content').on('click', 'img', function () {
        var width = $(window).width() * 0.8 + 'px';
        var height = $(window).height() * 0.8 + 'px';
        var src = $(this).attr('src');
        var style = 'max-width:' + width + ';max-height:' + height;
        var content = '<img alt="preview" src="' + src + '" style="' + style + '">';
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: ['auto'],
            skin: 'layui-layer-nobg',
            shadeClose: true,
            content: content,
        });
    });
1周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!