H5实现查看图片和删除图片的效果

Posted 2020-11-25 luoyihao

在最近的项目中，H5需要实现查看图片和删除图片的效果，总结如下：

一、查看图片

查看图片使用weui的gallery。首先添加gallery的html，然后隐藏。

<div class="weui-gallery" style="display: none">
    <span class="weui-gallery__img">
        <img>
    </span>
    <div class="weui-gallery__opr">
    </div>
</div>

当点击图片位置时，若是默认图片，则触发上传，否则把图片的src放到gallery中，然后gallery显示出来。

当gallery被点击时则隐藏gallery，从而实现了查看图片的效果。

// 放大图片
var $avatar = $(".frontPic");    //图片列表
var $galleryImg = $(".weui-gallery__img img");//相册图片地址
var $gallery = $(".weui-gallery");

$gallery.on("click", function(){
    $gallery.fadeOut(100);
});

// 上传图片
$(".frontPic").click(function(){
    if($(".frontPic").attr("src") == "../../images/front.png"){
        $(".frontPicUploader").trigger("click")
    }else{
        $galleryImg.attr("src", $avatar.attr("src"));
        $gallery.fadeIn(100);
    }
})

效果：

普通状态：

 

查看图片：

二、删除图片

设置好删除图标的样式。

.delete-img{
    width: 0.75rem !important;
    height: 0.75rem !important;
    position: absolute;
    float: right;
    left: 7.3rem;
    margin-top: -.2rem;
    display: none;
}

增加删除图标的html。

<img src="../../images/[e-mail]" class="delete-img">

当加载图片和上传完图片时显示删除图标。

$(".delete-img").css("display","inline")

当删除图片时恢复默认图片，隐藏图标。

//删除照片
$(".delete-img").click(function(){
    $(".frontPic").attr("src","../../images/front.png")
    $(".delete-img").css("display","none")
})

效果：

无图片时：

 

 

 有图片时：