精华内容
下载资源
问答
  • layUI 图片预览

    千次阅读 2019-02-25 18:03:30
    // 论坛多图片上传 public function uploads(Request $request) { // 判断是否post 提交 if ($request->isPost()) { $files =$_FILES; // 文件保存路劲 $data_file = ...

    一、

    html 代码

     <td> <img class="layui-upload-img" onclick="previewImg(this)" src="{$familyDoctor.logo}"  /></td>
    

    js 代码 图片原始大小

    <script>
    
        function previewImg(obj) {
            var img = new Image();
            img.src = obj.src;
            var height = img.height + 50; //获取图片高度
            var width = img.width; //获取图片宽度
            var imgHtml = "<img src='" + obj.src + "' />";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [width + 'px',height+'px'],
                shadeClose:true,//点击外围关闭弹窗
                scrollbar: false,//不现实滚动条
                title: "图片预览", //不显示标题
                content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        }
    
    </script>
    

    js 代码 图片固定大小

        function previewImg(obj) {
            var img = new Image();  
            img.src = obj.src;
            var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";  
            //弹出层
            layer.open({  
                type: 1,  
                shade: 0.8,
                offset: 'auto',
                area: [500 + 'px',550+'px'],
                shadeClose:true,
                scrollbar: false,
                title: "图片预览", //不显示标题  
                content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响  
                cancel: function () {  
                    //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });  
                }  
            }); 
        }
    

    二、

    html代码

      <td  id="x-img"> <img class="layui-upload-img" src="/uploads/{$familyDoctor.logo}"  style="width: 40px; height: 40px; border-radius: 4px;" /></td>
    

    js代码

       layui.use(['laydate','element','laypage','layer'], function() {
                $ = layui.jquery;//jquery
                laydate = layui.laydate;//日期插件
                lement = layui.element();//面包导航
                laypage = layui.laypage;//分页
                layer = layui.layer;//弹出层
    
                layer.ready(function(){ //为了layer.ext.js加载完毕再执行
                    layer.photos({
                        photos: '#x-img'
                        ,shift: 5 //0-6的选择,指定弹出图片动画类型,默认随机
                    });
                });
    
    
            });
    
    展开全文
  • LayUI 图片预览功能

    2021-02-16 12:19:34
    1.jquery版本3.2.1(以下程序适用于1.7版本以上) <script type="text/...</script> ...<script>... // 鼠标移至图片上方,鼠标样式变为手状态 $("ul").on("mouseover", "img", function() { this.style

    1.jquery版本3.2.1(以下程序适用于1.7版本以上)

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    

    2.HTML代码

    <script>
    	// 鼠标移至图片上方,鼠标样式变为手状态
        $("ul").on("mouseover", "img", function() {
            this.style.cursor = "pointer";
        });
    
        // 图片点击预览,ul为父类元素,img为已存在元素或者未来生成元素
        $("ul").on("click","img", function () {
            clickPicture(this);
        });
    
        // 点击图片放大预览
        function clickPicture(obj) {
            var img = new Image();
            img.src = obj.src;
            img.onload = function (ev) {
                // 获取图片高度
                var height = this.height;
                // 获取图片宽度
                var width = this.width;
                // 图片URL地址
                var imgHtml = "<img style='height: 100%;width: 100%' src='" + obj.src + "' />";
                // 图片显示面积,前参数为宽,后参数为高
                var area = [];
                if (height <= 747 && width <= 1680) {
                    area = [width + 'px', height + 'px'];
                } else if (height > 747 && width <= 1680) {
                    area = [width + 'px', 747 + 'px'];
                } else if (height <= 747 && width > 1680) {
                    area = [1680 +'px', height + 'px'];
                } else {
                    area = [1680 + 'px', 747 + 'px'];
                }
                //弹出层
                top.layer.open({
                    type: 1,
                    shade: 0.8,
                    offset: 'auto',
                    area: area,
                    shadeClose: true,//点击外围关闭弹窗
                    scrollbar: false,//不显示滚动条
                    title: false, //不显示标题
                    content: imgHtml, //捕获的元素
                    cancel: function () {
                        //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
                    }
                });
            };
        }
    </script>
    

    3.效果

    ①原缩略图

    在这里插入图片描述

    ②点击缩略图后按屏幕显示范围放大,如果超出范围显示滚动条

    在这里插入图片描述

    展开全文
  • 这个layui的layer的组件自带的功能 layer.photos({ photos: json ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数) }); 这个json 就是一个存储图片的格式 我们得...

    这个layui的layer的组件自带的功能

    layer.photos({
        photos: json
        ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
      });

    这个json 就是一个存储图片的格式    我们得按照它规定的格式  存入到json中

    json的格式如下

    
    {
      "title": "", //相册标题
      "id": 123, //相册id
      "start": 0, //初始显示的图片序号,默认0
      "data": [   //相册包含的图片,数组格式
        {
          "alt": "图片名",
          "pid": 666, //图片id
          "src": "", //原图地址
          "thumb": "" //缩略图地址
        }
      ]
    }

    和上面合并一下就是

    如果要是想点击那张图片  而且  可以左右切换的  那么 每次点击的时候 就要传入 一个当前图片的 序号  

    给那个  start 参数赋值   下 图片在所有的图片集合中的下标即可  

    data 中是 存储你所有的图片的信息   

    layer.photos({
        photos: 
            {
              "title": "", //相册标题
              "id": 123, //相册id
              "start": 0, //初始显示的图片序号,默认0
              "data": [   //相册包含的图片,数组格式
                {
                  "alt": "图片名",
                  "pid": 666, //图片id
                  "src": "", //原图地址
                  "thumb": "" //缩略图地址
                }
              ]
            }
        ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
      });

    然后就实现了  关注我 持续更新前端知识  加油  奥利给 周末周六 也要持续学习呢 

     

    展开全文
  • layui点击图片预览

    万次阅读 2018-06-26 18:54:18
    function previewImg(obj) { var img = new Image(); img.src = obj.src; var height = img.height + 50; //获取图片高度 var width = img.width; //获取图片宽度 var imgHtml = ...

    预览图片显示原始大小

        function previewImg(obj) {
            var img = new Image();  
            img.src = obj.src;
            var height = img.height + 50; //获取图片高度
            var width = img.width; //获取图片宽度
            var imgHtml = "<img src='" + obj.src + "' />";  
            //弹出层
            layer.open({  
                type: 1,  
                shade: 0.8,
                offset: 'auto',
                area: [width + 'px',height+'px'],
                shadeClose:true,//点击外围关闭弹窗
                scrollbar: false,//不现实滚动条
                title: "图片预览", //不显示标题  
                content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响  
                cancel: function () {  
                    //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });  
                }  
            }); 
        }

    固定预览图片大小 500 * 500

        function previewImg(obj) {
            var img = new Image();  
            img.src = obj.src;
            var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";  
            //弹出层
            layer.open({  
                type: 1,  
                shade: 0.8,
                offset: 'auto',
                area: [500 + 'px',550+'px'],
                shadeClose:true,
                scrollbar: false,
                title: "图片预览", //不显示标题  
                content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响  
                cancel: function () {  
                    //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });  
                }  
            }); 
        }

    HTML内使用

     <img src="..." alt="..." width="200px" height="200px" class="layui-upload-img" onclick="previewImg(this)">
    展开全文
  • layui 预览图片

    千次阅读 2019-05-21 15:37:16
    预览图片显示原始大小 function previewImg(obj) { var img = new Image(); img.src = obj.src; var height = img.height + 50; //获取图片高度 var width = img.width; //获取图片宽度 va...
  • //上传图片-图片预览 $(document).on('click','[data-role="prveimg"]',function(){ layer.photos({ photos: '.files', //父元素 shade: .5, anim: 5 }); }); //上传视频-视频预览 $(document).on('...
  • layui图片上传、预览、删除、 <div class="layui-upload"> <button type="button" id="test2" class="layui-btn tj">多图片上传</button> <blockquote class="layui-elem-quote layui-quote...
  • layui上传图片以及图片预览

    千次阅读 2018-08-12 17:20:28
    1.选择文件后自动上传 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&...../../layui/css/layui
  • }) <div class="v8-vtalk-img"> <img src="/static/shared/images/banner1-dgdwxx.jpg" data-role="prveimg"/> div> 相册层问题-点击两次图片才能实现图片预览 但是有个问题,点第一次不会出来,点第二次才会。
  • <div class="imageShow"> <img id="uploadImageShow" src="" onclick="previewImg(this) "/> </div>
  • layui预览图片功能

    2020-09-10 13:51:25
    layer.photos有两种用法 ...使用vue的@click事件获取到图片地址,然后将图片地址用json形式赋值给photos这样就可以实现图片预览的功能 preview(img){ layer.photos({ photos: {"data": [{"src": img}]} ,closeBtn:
  • 同样的代码 突然失效了 。 当时也算找了一会 最后发现 原来是 layui版本的问题 好像支持鼠标放大的 至少是 2.5.4 版本 后来更新了版本可以了
  • 问题:使用layui上传图片的,出现图片旋转90度 解决办法:通过EXIF.getData获取图片信息,判断图片是否旋转 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
  • 今天小编就为大家分享一篇Layui点击图片弹框预览的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • <!... <... <head>...Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewp.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,172
精华内容 468
关键字:

layui图片预览