标签：code 点击图片 trigger line fun delete play 图片 tar
在最近的项目中，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/delImg@3x.png" class="delete-img">
当加载图片和上传完图片时显示删除图标。
$(".delete-img").css("display","inline")
当删除图片时恢复默认图片，隐藏图标。
//删除照片
$(".delete-img").click(function(){
$(".frontPic").attr("src","../../images/front.png")
$(".delete-img").css("display","none")
})
效果：
无图片时：
有图片时：
标签：code 点击图片 trigger line fun delete play 图片 tar
原文地址：https://www.cnblogs.com/luoyihao/p/12336179.html
