zoukankan      html  css  js  c++  java
  • layui点击图片放大

    显示的图片
    <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; 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=" 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>
  • 相关阅读:
    hive日期转换函数2
    hive中的日期转换函数
    Oracle的字符连接函数 concat 和 || 的区别
    Oracle的去重函数 distinct
    Oracle之常用sql
    基于 Consul 的 Docker Swarm 服务发现
    Swift原理
    Mirantis OpenStack 8.0 版本
    vmare虚拟化解决方案
    docker网络解析
  • 原文地址:https://www.cnblogs.com/wangbiubiu/p/9392293.html
Copyright © 2011-2022 走看看