layui点击图片放大

2018/07/30 19:19
阅读数 34
显示的图片
<div class="form-group col-md-6">
<div class="col-sm-3 control-label"><span class="require">*</span>&nbsp;图片</div>
<div class="col-sm-9">
<!--<input type="text" class="form-control" v-model="busMoments.photos" placeholder="图片"-->
<!--data-rule="图片:required;length(0~5000)" maxlength="5000"/>-->
<div class="col-sm-label" >
<!--<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 100%;height: 232px;">-->
<div class="layui-upload-list" >
<span v-for="option,index in imgList" :id=index>
<img :src=option class="layui-upload-img" border="1px" style="width: 90px;height: 90px;padding: 5px" @click="amplificationImg(option)"/>
</span>
</div>
<!--</blockquote>-->
</div>
</div>
</div>
放大的显示图片
<img alt="" style="display:none" id="displayImg" src="" />

js代码
<script>
function amplificationImg( url) {
$("#displayImg").attr("src", url);
var height = $("#displayImg").height();//拿的图片原来宽高,建议自定义宽高
var width = $("#displayImg").width();
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true,
area: [width + 'px', height + 'px'], //宽高
content: "<img src=" + url + " />"
});
}
</script>
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部