时间:2021-05-26
我就废话不多说了,直接上代码吧!
如下所示:
<img src="123.png" width="20px" height="20px" class="layui-upload-img" onclick="previewImg(this)"> 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 + "' width='500px' height='500px'/>"; //弹出层 layer.open({ type: 1, shade: 0.8, offset: 'auto', area: [500 + 'px',550+'px'], // area: [width + 'px',height+'px'] //原图显示 shadeClose:true, scrollbar: false, title: "图片预览", //不显示标题 content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响 cancel: function () { //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 }); } }); } //另外打开一个页面显示图片 function previewImg(obj) { window.open(obj.src); }以上这篇Layui点击图片弹框预览的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
php结合layui前端实现多图上传前端html代码请选择图片文件名图片预览大小状态操作开始上传js代码layui.use('upload',function(
layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/可以从官网上下载最新版本.使用layer实现登录弹框,
1.点击按钮(按钮的点击事件在此不在赘述,接下来直接写底部弹框的实现方式和样式的设计)2.弹框Dialogdialog=newDialog(context,R.
先来简单说一下本文所要实现的功能:用户在浏览网页的时候,长按某一区域,识别如果是图片,则弹出弹框,出现保存图片的功能。同时识别图片是否是二维码,如果是则在弹框中
本篇效果利用HTML、CSS和Jq实现的图片点击预览功能,在预览时也可以点击切换图片。图片1为整体效果,图片2是点击图片1后出现被点击图片的预览图片的名称以