精华内容
下载资源
问答
  • layui table中显示图片的方法:图片需要用到模板.templet:注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style layui.use('table',function () { var table= layui.table; table.render...

    layui table中显示图片的方法:

    图片需要用到模板.templet:

    注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style

    ',style:'height:48px;width:48px;line-height:48px!important;'}

    css,注意替换headimg

    推荐:layui框架教程

    以上就是layui怎么做图片在列表中显示的详细内容,更多请关注龙方网络其它相关文章!

    展开全文
  • 写在前面需求是页面上的图片缩略图, 鼠标悬浮时显示原图片, 并按比例缩放.操作步骤官方文档关键属性1. type: 设置type=1, 以页面的形式展示图片 2. content: 设置content即页面中的内容 3. offset: 设置页面(图片)的...

    写在前面

    需求是页面上的图片缩略图, 鼠标悬浮时显示原图片, 并按比例缩放.

    操作步骤

    官方文档

    关键属性

    1. type: 设置type=1, 以页面的形式展示图片

    2.  content: 设置content即页面中的内容

    3. offset: 设置页面(图片)的展示坐标

    4. area: 设置展示区域宽高 auto-自适应

    看到这里, 可以联想到将type设置为1-页面, content设置成标签然后把图片src传进来就可以展示图片了.

    接下来是设置图片显示的坐标(offset属性), 以及图片展示区域大小(area属性), 图片的宽高其实可以在标签中动态拼接.

    关键代码

    //浏览器窗口width height均/4 设置为图片展示的左上角坐标

    var x = document.documentElement.clientWidth/4;

    var y = document.documentElement.clientHeight/4;

    //图片的src

    var src =obj.src;//图片宽高/3 即缩放为原图片大小的1/3

    var width = obj.naturalWidth/3;

    var height = obj.naturalHeight/3;

    //拼接img标签 设置width height src属性值

    var img_show = "";

    bigImgIndex=layer.open({

    content:img_show,

    type:1,

    offset:[y+"px",x+"px"],

    title:false,

    area:['auto','auto'],

    shade:0,

    closeBtn:0});

    实际代码

    /** 鼠标放在图片上方,显示大图*/

    var bigImgIndex = null;functiontipImg(obj,level){try{var navigatorName = "Microsoft Internet Explorer";if( navigator.appName !=navigatorName ){if(obj.nodeName == 'IMG'){var e =window.event;//var x = e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft

    //var y = e.clientY+document.body.scrollTop + document.documentElement.scrollTop

    var x = document.documentElement.clientWidth/4;

    var y = document.documentElement.clientHeight/4;

    var src =obj.src;//var width = obj.naturalWidth;

    //var height = obj.naturalHeight;

    var width = obj.naturalWidth/3;

    var height = obj.naturalHeight/3;

    varcurlayer;if(!level){

    curlayer=layer;

    }else if(level==1){

    curlayer=parent.layer;

    }var img_infor = "";

    bigImgIndex=curlayer.open({//content:[src,'no'],

    content:img_infor,//type:2,

    type:1,

    offset:[y+"px",x+"px"],

    title:false,//area:[width+"px",height+"px"],

    area:['auto','auto'],

    shade:0,

    closeBtn:0});

    }

    }

    }catch(e){

    }

    }

    效果图

    个性化

    以上只是个人修改的结果, 需求不一样的可以作相应调整, 不再赘述了.

    感谢

    展开全文
  • cols:[[{field:'id',width:80,title:'ID',align:'center'},{field:'title',width:200,title:'活动名称',align:'center'},{field:'end_time',width:120,title:'活动banner',align:'center',t...

    cols: [

    [

    { field: 'id', width: 80, title: 'ID', align: 'center' },

    { field: 'title' , width: 200, title: '活动名称', align: 'center' },

    { field: 'end_time', width: 120, title: '活动banner', align: 'center',  templet: function(d) {

                            //return  "

    var url =d.banner;

    if(url == null){

    return '暂无图片';//也可设置默认图片

    }else {

    return '' +

                                    '' +

    '';

    }

    } },

    { field: 'content',  title: '活动简介', align: 'center' },

    { field: 'start_time', width: 180, title: '活动时间', align: 'center', templet: '#timeTpl'},

    { field: 'status', width: 110, title: '状态', templet: '#statusTpl', align: 'center' },

    {width: 170,title: '操作',align: 'center',templet: '#operationTpl'}

    ]

    ],

    展开全文
  • layUI可以直接使用本地的json文件进行列表数据渲染,但,我们会发现,官网ctr+c ctr+v 过来的代码在做查询时每次看起来都有列表刷新的动作,但实际操作无效,百度了一大圈也没找到具体的原因,无奈继续回去看官网,...

    layUI可以直接使用本地的json文件进行列表数据渲染,但,我们会发现,官网ctr+c ctr+v 过来的代码在做查询时每次看起来都有列表刷新的动作,但实际操作无效,百度了一大圈也没找到具体的原因,无奈继续回去看官网,后面总结出只有一点,也是大家比较容易忽略的一点:

    官网说在查询时的url必须设置异步接口,so,如果我们不借助后台看起来这个效果好像是单靠前端是出不来,但,为了本地演示,这里写了一个很low的方法,单靠show()hide()方法来实现查询效果(效果演示可以单不建议实际开发中使用该方法)

    以下代码粘贴复制便可直接使用:

    搜索ID:

    搜索

    layui.use('table', function(){

    var table = layui.table;

    //方法级渲染

    var tabins = table.render({

    elem: '#LAY_table_user'

    ,url: 'new_file.json'

    ,cols: [[

    {checkbox: true, fixed: true}

    ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}

    ,{field:'username', title: '用户名', width:80}

    ,{field:'sex', title: '性别', width:80, sort: true}

    ,{field:'city', title: '城市', width:80}

    ,{field:'sign', title: '签名'}

    ,{field:'experience', title: '积分', sort: true, width:80}

    ,{field:'score', title: '评分', sort: true, width:80}

    ,{field:'classify', title: '职业', width:80}

    ,{field:'wealth', title: '财富', sort: true, width:135}

    ]]

    ,id: 'testReload'

    ,page: true

    ,height: 315

    ,done:function(res){

    }

    });

    var $ = layui.$, active = {

    reload: function(){

    var demoReload = $('#demoReload');

    //执行重载

    table.reload('testReload', {

    page: {

    curr: 1 //重新从第 1 页开始

    }

    ,where: {

    key: {

    id: demoReload.val()

    }

    }

    });

    }

    };

    $('.demoTable .layui-btn').on('click', function(){

    search = $('#demoReload').val();

    $('.layui-table-fixed tbody tr').each(function(i){

    var id = $(this).children('td').eq(1).children('div').html();

    if(id.indexOf(search)>=0){

    $(this).show()

    $('.layui-table-main tbody tr').eq(i).show()

    }else{

    $('.layui-table-main tbody tr').eq(i).hide()

    $(this).hide();

    }

    });

    });

    });

    展开全文
  • thinkphp3.2+layui 上传多图片及缩略图

    千次阅读 2018-11-07 17:54:51
    上传图片后,并生成缩略图。   前端html: <div class="layui-upload"> <button type="button" class="layui-btn" id="manyUpload">多...
  • 很多时候需要查看缩略图的原图,那么layer.open是一个不错的选择直接上代码//查看原图function showImg(url){//alert(url); var img_infor = "";layer.open({type: 1,closeBtn: 1,shade: false,title: false, //不...
  • html代码: <form class="layui-form" id="form"> &...layui-form-item"...layui-form-label"...缩略图</label> <div class=&quo
  • 本文实例讲述了layer前端组件实现图片显示功能的方法。分享给大家供大家参考,具体如下:实现图片显示功能:layer1....官网下载地址:http://layer.layui.com/或者点击此处本站下载。里面有具体的使用方法这里注...
  • 点击缩略图查看大图的功能实现用的是layui开发文档内的layer.photos-相册层。 官方开发文档里photos支持传入json和直接读取页面图片两种方式。 下面是官方开发文档的截图,官方开发文档链接:...
  • 查看原js//定义列var cols = [[{type: 'radio',width: 60}, {type: 'numbers',width: 50}, {field: 'org_id',title: '所属单位',align: 'center',templet: function(d) {return LocalData.getOrg().name;...
  • 写在前面需求是页面上的图片缩略图, 鼠标悬浮时显示原图片, 并按比例缩放.操作步骤官方文档关键属性1. type: 设置type=1, 以页面的形式展示图片2. content: 设置content即页面中的内容3. offset: 设置页面(图片)的...
  • https://www.cnblogs.com/yadongliang/p/11059108.html https://blog.csdn.net/sdiudui/article/details/80424539
  • 窗口缩略图图像显示时,释放触控板或鼠标。若要查看另一个 App 的窗口,请按下 Tab 键。关闭按钮关闭按钮若要关闭窗口,请点按窗口左上角的红色按钮。Control 键Command 键若要执行操作或使用快捷键,请使用 Command...
  • 需求是页面上的图片缩略图, 鼠标悬浮时显示原图片, 并按比例缩放. 操作步骤 官方文档 点击跳转 关键属性 1. type: 设置type=1, 以页面的形式展示图片 2. content: 设置content即页面中的内容 3. ...
  • 很多时候需要查看缩略图的原图,那么layer.open是一个不错的选择直接上代码//查看原图function showImg(url){//alert(url); var img_infor = "";layer.open({type: 1,closeBtn: 1,shade: false,title: false, //不...
  • {"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":6,"count":6}]},"card":[{"des":"云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT ...
  • 第一步:views 加入添加图片的按钮以及显示图片的按钮 form部分 ...div class="layui-form-item layui-form-text">...label class="layui-form-label">缩略图</label> <di...
  • layui在兼容分辨率上感觉挺不错,今天主要介绍layui的layer弹出层模块的相册层 layer.photos,功能需求页面展示图片的缩略图,当点击图片是需要展示查看大图效果,layer的相册层正好实现了这一功能。 首先需要引入...
  • 今天遇到的情况是,在表格中需要针对指定的产品进行缩略图片的替换操作 那么,我需要根据所赋值不同索引信息的 class进行数据获取与修改 在此,进行整理(截图展示),希望能帮到有需求的道友吧
  • <div class="layui-form-item">...缩略图</label> <div class="layui-input-block"> <div class="layui-upload"> <button type="button" class="layui-btn" id="uploadPic".
  • 最近项目需要做上传功能,网上搜索了一下各种...在demo中,我也集成了图片缩略图的生成,视频缩略图的截取等功能,有兴趣的可以看一下Stream插件:http://twinkling.cn/首先围观一下是不是感觉不错,至少我认为是可...
  • 很多时候需要查看缩略图的原图,那么layer.open是一个不错的选择 直接上代码 //查看原图 function showImg(url){ //alert(url); var img_infor = ; layer.open({ type: 1, closeBtn: 1, shade: ...
  • layui-form-item"&gt; &lt;label class="layui-form-label"&gt;您的照片&lt;/label&gt; &lt;div class="layui-input-inline"&gt; &lt;label for="...
  • 帝国CMS怎么实现自动获取缩略图,选择 使用程序代码! if(empty($r[titlepic])) { $r[titlepic]='/e/data/images/notimg.gif'; }else{ $r[titlepic]=sys_ResizeImg($r[titlepic],220,150,1,'','e/data/tmp/...
  • 这里使用了layer弹出组件。官方网址:http://layer.layui.com/ 第一种方法代码如下: var img = new Image(); img.src = $("#jiaoguitu").attr("src"); var imgHtml = ""; //捕获页 layer.open({ type: 1,
  • 1、下载完整的lyui框架 h-ui引入的只有layui的弹窗,无其他功能。 https://www.layui.com/ 安装好后复制到自己想用的文件夹中...缩略图:</label> <input type="text" value="" id="thumb_src" name="thum

空空如也

空空如也

1 2 3
收藏数 42
精华内容 16
关键字:

layui缩略图