Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法
更新時(shí)間：2019年09月16日 09:41:45 作者：amenghui
今天小編就為大家分享一篇Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
我就廢話不多說(shuō)了，直接上代碼吧！
如下所示：
<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最外層，否則可能被其它的相對(duì)元素所影響
cancel: function () {
//layer.msg('捕獲就是從頁(yè)面已經(jīng)存在的元素上，包裹layer的結(jié)構(gòu)', { time: 5000, icon: 6 });
}
});
}
//另外打開一個(gè)頁(yè)面顯示圖片
function previewImg(obj) {
window.open(obj.src);
}
以上這篇Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
TS是強(qiáng)類型的JS超集,支持ES6語(yǔ)法,支持面向?qū)ο缶幊痰母拍?如類、接口、繼承、泛型等,下面這篇文章主要給大家介紹了關(guān)于一些常見的TypeScript面試題的相關(guān)資料,需要的朋友可以參考下2024-09-09
鼠標(biāo)左鍵單擊沖突的問(wèn)題解決方法(防止冒泡)
一個(gè)頁(yè)面實(shí)現(xiàn)了兩種右鍵菜單，當(dāng)鼠標(biāo)左鍵單擊空白處時(shí)，右鍵菜單并不隱藏，下面為大家解決鼠標(biāo)左鍵單擊沖突的問(wèn)題2014-05-05
js實(shí)現(xiàn)簡(jiǎn)單的獲取驗(yàn)證碼按鈕效果
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的獲取驗(yàn)證碼按鈕加效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
本文主要介紹了最常見和最有用的字符串相關(guān)的方法，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JS字符串false轉(zhuǎn)boolean的方法(推薦)
下面小編就為大家?guī)?lái)一篇JS字符串false轉(zhuǎn)boolean的方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
原生JavaScript再網(wǎng)頁(yè)實(shí)現(xiàn)文本轉(zhuǎn)語(yǔ)音功能
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)原生JavaScript再網(wǎng)頁(yè)實(shí)現(xiàn)文本轉(zhuǎn)語(yǔ)音功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2025-03-03
webpack-bundle-analyzer?插件配置使用方法
webpack-bundle-analyzer?是?webpack?的插件，需要配合?webpack?和?webpack-cli?一起使用，這篇文章主要介紹了webpack-bundle-analyzer?插件配置,需要的朋友可以參考下2023-02-02
微信小程序scroll-view指定滾動(dòng)元素起始位置怎么做
scroll-view為滾動(dòng)視圖,分為水平滾動(dòng)和垂直滾動(dòng),這篇文章主要給大家介紹了關(guān)于微信小程序scroll-view不能左右滑動(dòng)問(wèn)題的解決方法,需要的朋友可以參考下2022-12-12
JS獲取scrollHeight問(wèn)題想到的標(biāo)準(zhǔn)問(wèn)題
如果沒(méi)有文檔聲明可以用 document.body.scrollHeight,如果有文檔聲明必須用 document.documentElement.scrollHeight關(guān)于這方面的東西2007-05-05
獲取鼠標(biāo)在div中的相對(duì)位置的實(shí)現(xiàn)代碼
如何獲取鼠標(biāo)在div中的相對(duì)位置，其實(shí)是很簡(jiǎn)單，下有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-12-12