精华内容
下载资源
问答
  • layer 查看图片

    2018-06-14 11:09:00
    ="scripts/layer/layer.js" > script > < script > $( function () { $( ' #photo-list img ' ).on( ' click ' , function () { layer.photos({ photos: ' #photo-list ' , shadeClose: false , ...
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta charset="utf-8" />
        <script src="scripts/jquery-1.10.2.js"></script>
    
        <script src="scripts/layer/layer.js"></script>
        <script>
            $(function () {            
                $('#photo-list img').on('click', function () {
                    layer.photos({
                        photos: '#photo-list',
                        shadeClose: false,
                        closeBtn: 2,
                        anim: 0
                    });
                })
            });
        </script>
    </head>
    <body>
        输入:<input type="text" id="txtTest" />
        <br />
        <input type="button" value="点我" id="btn1" />
        <div class="photo-group" id='photo-list'>
            <img src="Content/请假模板.png" />
            <img src="Content/检查化验相关表截图.png" />
            <img src="Content/考勤.png" />
        </div>
    </body>
    </html>

     

     

     

    转载于:https://www.cnblogs.com/ligenyun/p/9182117.html

    展开全文
  • 基于layer上传查看图片

    千次阅读 2017-06-29 11:38:19
    首先要引入layer.js 和layer.css. 可查看layerApi html结构: 点击上传 预览 <img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0E/ChMkJlbKwaOIN8zJAAs

    首先要引入layer.js 和layer.css. 可查看layerApi


    html结构:

     <td id="layer-photos-demo" class="layer-photos-demo">
          	<input type="file" name="invoice_img" required="required" class="hidden" value=""id="images"/>
                   <a href="javascript:void(0);" class="file_img">点击上传</a>
                   <a href="javascript:void(0);" class="img_look fr">预览</a>
                   <img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0E/ChMkJlbKwaOIN8zJAAs5DadIS-IAALGbQPo5ngACzkl365.jpg"
                	layer-src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0E/ChMkJlbKwaOIN8zJAAs5DadIS-IAALGbQPo5ngACzkl365.jpg"
                	class="img1 fr hidden" alt="">
    </td>


    js:部分  

    $('.file_img').on('click', function (e) {
    	e.preventDefault();
    	$('#images').trigger('click');
    })
    $('#images').on("change",function(){
    $('.file_img').html('已上传');
    var srcs = getObjectURL(this.files[0]);
    $('.img1').attr("src",srcs).attr('layer-src',srcs);
    $('.img_look').hide().next('.img1').show();
    layui.use('layer', function(){
    		var $ = layui.jquery
    		,layer = layui.layer;
    		layer.photos({
    			photos: '#layer-photos-demo',
    			anim: 1
    			});
    
    		});
    	})
    function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file)
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file)
            }
            return url
        }
    展开全文
  • layer.photos 点击图片放大查看

    千次阅读 2018-08-17 12:55:08
    &lt;script&gt; $("body").on("click","... layer.photos({ photos: { "data": [{"src": e.target.src}] } }); }); &lt;/script&gt;
    $("body").on("click",".imgs img",(e) => {
        layer.photos({
            photos: { "data": [{"src": e.target.src}] }
        });
    });

     

     
    展开全文
  • layer.photos 方法在使用过程中发现没有通过鼠标中键(滚轴)实现图片缩放功,故通过搜索引擎找到如下方法 需要引用 jquery $(document).on("mousewheel DOMMouseScroll", ".layui-layer-phimg img", function (e) {...

    2019年4月12日 layer版本 layer-v3.1.1

    layer.photos 方法在使用过程中发现没有通过鼠标中键(滚轴)实现图片缩放功,故通过搜索引擎找到如下方法

    需要引用 jquery

    $(document).on("mousewheel DOMMouseScroll", ".layui-layer-phimg img", function (e) {
           var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
               (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
           var imagep = $(".layui-layer-phimg").parent().parent();
           var image = $(".layui-layer-phimg").parent();
           var h = image.height();
           var w = image.width();
           if (delta > 0) {
               if (h < (window.innerHeight)) {
                   h = h * 1.05;
                   w = w * 1.05;
               }
           } else if (delta < 0) {
               if (h > 100) {
                   h = h * 0.95;
                   w = w * 0.95;
               }
           }
           imagep.css("top", (window.innerHeight - h) / 2);
           imagep.css("left", (window.innerWidth - w) / 2);
           image.height(h);
           image.width(w);
           imagep.height(h);
           imagep.width(w);
       });
    

    此方法可以实现鼠标中键(滚轴)缩放,但是在实际项目中还是相册功能不符合:切换图片的箭头,在图片内显示,也即是说箭头总是跟随图片的变化而变化。

    展开全文
  • layer图片显示小栗子

    千次阅读 2018-03-29 11:50:04
    在网页查看图片的时候,总是无法点击放大查看,今天在网上突然搜到一个插件,layer,然后自己测试了一下,感觉还不错,所以写个demo,官网链接:http://layer.layui.com/首先从官网下载下来安装包,解压后的样子,...
  • layer弹出图片

    千次阅读 2019-06-24 14:04:58
    show:function(){ img = '... layer.open({ type: 2,//1:本地 2:url title: '图片查看', shadeClose: true, shade: 0.6,//遮罩...
  • layer UI 在弹出的窗口下如何查看图片时,图片不受窗口的限制,能遮盖窗口, 全屏显示。目前遇到的问题是查看图片图片只是在窗口的范围下面看,这样 图片看不全,不符合设计要求
  • layer 点击图片缩略图弹出图片原图

    千次阅读 2019-08-15 17:39:11
    项目是单页面,有多处需要用到查看图片详情,于是在主页面放置一个图片弹层的容器 <div id="window-img" style="display: none"></div> 封装一个函数,需要传入要查看图片的路径 function wind...
  • 用过很多弹出层的插件,自己也模拟了几个,但是...感兴趣的朋友可以自己在官网查看。官网:http://www.layui.com/doc/modules/layer.html废话不多说,源码奉上:<!DOCTYPE html> <html> <head> &...
  • 1.在使用layui时layer.open的弹窗使用十分方便,普通弹窗可以满足普通需求,prompt可以满足一个input框的需求,但如果有两个输入框或者有select时,就需要用到自定义弹窗了; 2.select失效 2.1失效原因是.layui-...
  • 写在前面需求是页面上的图片缩略图, 鼠标悬浮时显示原图片, 并按比例缩放.操作步骤官方文档关键属性1. type: 设置type=1, 以页面的形式展示图片2. content: 设置content即页面中的内容3. offset: 设置页面(图片)的...
  • //查看大图 $(document).on('click', '.layui-layim-photos', function(){ var src = this.src; //图片地址 layer.open({ type: 1 //open的类型 1为页面层 ,shadeClose: true //点击遮罩关闭
  • layer 弹出相册层 (图片展示方式)

    千次阅读 2019-01-23 13:38:55
    如果你的图片是从后台传过来的json格式里,可以通过ajax加载让图片显示在页面上,然后在使用layer插件,做出点击以后就可以查看大图的效果。 一、通过ajax请求动态获取json,然后在得到json中的图片的地址。  1....
  • "tip":"ECS精选产品特惠低至0.95折,立即查看 高配云服务器免费试用,立即查看","btn1":"立即开通","link2":"https://www.aliyun.com/price/product?spm=5176.8789780.1092586.1.2e8e57a8lGNDpl#/ecs/detail","title...
  • 然后动态改变 src 和 layer-src ;// 图片上传(方法) 调用上传方法;//照片上传 但是效果出现了bug,就是当点击图片时第一次还是显示的是原图,第二次才显示替换上的新图;删除图片之后也是同样的情况;所以改换用...
  •  else if (flag == "2") {//图片  bigImg = "<div><img src='..\\..\\" + src + "' height='100%' width='100%'/></div>";  }  else if (flag == "3") {//网址  bigImg = ";background-color:antiquewhite;...
  • 使用layer弹框:实现点击图片查看原图的效果; 引入layer,函数封装: // 点击图片查看大图 function showImage(imgDom) { layui.use(['layer'], function () { var layer = layui.layer; var imgLayer; //判断...
  • 需求是页面上的图片缩略图, 鼠标悬浮时显示原图片, 并按比例缩放. 操作步骤 官方文档 点击跳转 关键属性 1. type: 设置type=1, 以页面的形式展示图片 2. content: 设置content即页面中的内容 3. ...
  • 图片放大查看

    2020-12-08 10:32:14
    <img class="imgs" src="路径" style="width:100px;float:left"> $(".imgs").click(function(){ var img_url=$(this).attr('src'); layer.open({ type: 1, shade: false...
  • 插件描述:利用layer.min.js插件进行实现. 参考示例:http://www.jq22.com/jquery-info5018
  • 写在前面需求是页面上的图片缩略图, 鼠标悬浮时显示原图片, 并按比例缩放.操作步骤官方文档关键属性1. type: 设置type=1, 以页面的形式展示图片 2. content: 设置content即页面中的内容 3. offset: 设置页面(图片)的...
  • layer.js实现弹出相册效果

    千次阅读 2018-12-28 13:32:01
    有时候,前端开发需要点击图片实现弹出相册效果(图片查看器),可以放大预览图片并且左右翻页切换,layer.js可以很轻松实现(layer.photos(options))。 实现步骤 1、导入相关layer插件 页面上只需要引入...
  • ImageDataLayer可以完成caffe自动读取图片进行模型训练和推断,但是在实际的应用中一般图像都是通过sensor采集而来,将采集得到的图片送到训练好的模型中进行识别、推断,此时就需要用到InputLayer,可以是用户完成...
  • layer弹出相册层

    2017-04-01 14:56:00
    如果你的图片是从后台传过来的json格式里,可以通过ajax加载让图片显示在页面上,然后在使用layer插件,做出点击以后就可以查看大图的效果。 一、通过ajax请求动态获取json,然后在得到json中的图片的地址。 1....
  • vue结合openlayer的使用

    2021-01-17 21:41:49
    Vue结合openlayer加载geoserver图层...查看图片图层包含的图块信息: 弹窗; <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popu
  • Layui 内置方法 - layer.photos(相册层)

    万次阅读 2019-04-22 11:31:44
    相册层,也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。如果是json传入,如下: $.getJSON('/jquery/layer/test/photos.json', function...
  • layer.photos(options) - 相册层

    千次阅读 2019-05-15 21:56:53
    layer.photos(options) - 相册层,也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。再看下面是一些关于layui.photos(options)-相册层的总结。 photos支持传入json和直接读...
  • 点击缩略图查看大图的功能实现用的是layui开发文档内的layer.photos-相册层。 官方开发文档里photos支持传入json和直接读取页面图片两种方式。 下面是官方开发文档的截图,官方开发文档链接:...

空空如也

空空如也

1 2 3 4 5 6
收藏数 120
精华内容 48
关键字:

layer图片查看