码迷,mamicode.com
首页 > 其他好文 > 详细

layui点击图片放大

时间:2018-07-30 20:17:52      阅读:3425      评论:0      收藏:0      [点我收藏+]

标签:hot   lse   cti   col   style   dex   order   cli   require   

显示的图片
<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  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>

layui点击图片放大

标签:hot   lse   cti   col   style   dex   order   cli   require   

原文地址:https://www.cnblogs.com/wangbiubiu/p/9392293.html

(2)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!