简单实现点击图片放大的功能

最新推荐文章于 2024-08-21 23:57:05 发布

志字辈小蚂蚁

最新推荐文章于 2024-08-21 23:57:05 发布

阅读量1.3w

点赞数 2

分类专栏：前端文章标签：点击查看大图简易 js

本文链接：https://blog.csdn.net/zzg19950824/article/details/83240812

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

背景：想在app中加上点击缩略图放大的效果，但是不想导入大量的JS ，也无需哪些复杂的插件，于是自己手写了一个很简单的实现，在这里记下来。

代码很简单，还有很多优化空间，时间有限，就没有优化了

1 . 先准备大图的位置

大图是fixed于整个界面，只修改其中的src以达到修改图片的目的

其中：

<i class="iconfont icon_close_right_c"></i>
//这代码是阿里矢量图下载的

完整:

        <!--大图位置-->
        <div class="imgcontent">
            <div id="_big_img">
                <div class="big_close"><i class="iconfont icon_close_right_c"></i></div>
                <img id="_big_src" src="">
            </div>
        </div>

2 . 缩略图代码

小图位置:
<li class="items_content_img" pid="ABCD">
    <div class="img_item_c">
        <img src="文件缩略图路径" pid="可扩展文件大图路径">
    </div>
    <div class="img_item_c">
        <img src="文件缩略图路径" pid="可扩展文件大图路径">
    </div>
</li>

此处的pid 路径我们有用到，这里可以优化为img 正常显示缩略图，而pid放完整的大图路径，可以优化加载速度

3. 相关JS

               $('#list_add_class').on("click", ".items_content_img img", function () {
                    var _href = $(this).attr("src");
                    $("#_big_src").attr("src", _href).parents(".imgcontent").fadeIn("1000");
                });
                $('.icon_close_right_c').on("click", function () {
                    $(".imgcontent").fadeOut()("1000");
                });

代码很简单，点击缩略图则调出隐藏的大图Div (大图DIV一开始是隐藏的)
为了优化显示效果，使用了fadein，fadeout

4.补充CSS代码


           .items_content_img{width: 100%;}
            .items_content_img img{
                width: 27vw;
                margin-left: 1.5vw;
                max-height: 14vw;
                border: #ccc 2px solid;
            }
            #_big_img{position: fixed;width: 80%;margin-top: 15%;margin-left: 10vw;}
            #_big_img img{width: 100%;}
            .icon_close_right_c{float: right;color: #ff0000;font-size: 10vw;}
            .imgcontent{height: 200%;opacity: 0.9;background: #fff;display: none}
            .img_item_c{float: left;}