首页 前端知识 Django 点击文章内图片展示原始图片大小

Django 点击文章内图片展示原始图片大小

2024-02-27 11:02:10 前端知识 前端哥 577 262 我要收藏

=效果展示=


在这里插入图片描述

=实现逻辑=

鼠标在图片上显示为放大镜 (style=“cursor: zoom-in;” )

点击图片实现放大效果(图片垂直水平居中,且鼠标此时显示为缩小镜)

点击放大后的图片放大效果消失

=相关代码=

<style>
    .blog-detail img {/*放大镜*/
        cursor: zoom-in;
    }
    .modal-show-pic{/*缩小镜*/
        cursor: zoom-out;
    }
    .img-in-modal{ /*实现modal内图片居中效果*/
        text-align: center;
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>


<!--展示图片使用的modal-->
<div class="modal fade modal-show-pic" tabindex="-1" role="img"  >
</div>
<!--文章内图片展示-->
<div class='blog-detail'>
<img alt=".png" src="/static/pic/post/图片.png" style="max-width: 800px; max-height: 300px;">
</div>


<script>
//图片点击事件
$('.blog-detail img').on('click',function () {
    console.log($(this));
    var src = $(this)[0].src;
    var str = '<img class="media-object img-in-modal" src='+src+'>';
    var modal = $('.modal-show-pic');
    modal.html(''); //清空modal内图片
    modal.append(str);//为modal添加当前图片
    modal.modal(); //modal展示
    //点击modal使放大效果消失
    modal.on('click',function () {
    $(this).modal('hide')
    })
})
</script>

=其他=

具体实现请看代码,此效果实现引用了bootstrap的模态框,如果不引用bootstrap,可以使用shadow及对display的控制实现相同效果

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2837.html
标签
django
评论
发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

JQ效果—展开和收起

2024-03-13 00:03:45

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!