Layui點擊圖片彈框預(yù)覽的實現(xiàn)方法
更新時間：2019年09月16日 09:41:45 作者：amenghui
今天小編就為大家分享一篇Layui點擊圖片彈框預(yù)覽的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說了，直接上代碼吧！
如下所示：
<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: "圖片預(yù)覽", //不顯示標(biāo)題
content: imgHtml, //捕獲的元素，注意：最好該指定的元素要存放在body最外層，否則可能被其它的相對元素所影響
cancel: function () {
//layer.msg('捕獲就是從頁面已經(jīng)存在的元素上，包裹layer的結(jié)構(gòu)', { time: 5000, icon: 6 });
}
});
}
//另外打開一個頁面顯示圖片
function previewImg(obj) {
window.open(obj.src);
}
以上這篇Layui點擊圖片彈框預(yù)覽的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)列出數(shù)組中最長的連續(xù)數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)列出數(shù)組中最長的連續(xù)數(shù)的方法及使用,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細介紹了JS實現(xiàn)縱向輪播圖的初級版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
微信小程序wx.request實現(xiàn)后臺數(shù)據(jù)交互功能分析
這篇文章主要介紹了微信小程序wx.request實現(xiàn)后臺數(shù)據(jù)交互功能,分析微信小程序wx.request在后臺數(shù)據(jù)交互過程中遇到的問題與相關(guān)的解決方法,需要的朋友可以參考下2017-11-11
組合模式大概是設(shè)計模式里面使用最為廣泛的模式之一了，模式本身理解起來也比較簡單，以至于可以毫不費力的寫出一個能用的組合模式偽代碼2016-08-08
這篇文章主要介紹了微信小程序uploadFile接口實現(xiàn)文件上傳流程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要為大家介紹了JS的數(shù)組方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了JS/jQ實現(xiàn)免費獲取手機驗證碼倒計時效果的相關(guān)資料,通過定義兩個接口，發(fā)送驗證請求和返回數(shù)據(jù)驗證手機號和驗證是否一致，后臺根據(jù)接口去實現(xiàn)，需要的朋友可以參考下2016-06-06
使用layer.msg 時間設(shè)置不起作用的解決方法
今天小編就為大家分享一篇使用layer.msg 時間設(shè)置不起作用的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript隨機抽取0-100之間不重復(fù)的10個數(shù)
這篇文章主要為大家詳細介紹了javascript隨機抽取0-100之間不重復(fù)的10個數(shù)，分享了兩種簡單辦法，感興趣的小伙伴們可以參考一下2016-02-02
javaScript產(chǎn)生隨機數(shù)的用法小結(jié)
這篇文章主要介紹了javaScript產(chǎn)生隨機數(shù)的用法小結(jié),包括JavaScript Math.random()內(nèi)置函數(shù) ，Js 隨機數(shù)產(chǎn)生6位數(shù)字的代碼，需要的朋友可以參考下2018-04-04