在最近的项目中,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")
})
效果:
无图片时:
有图片时: