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 }); 
      } 
    }); 
  }

 //另外打開(kāi)一個(gè)頁(yè)面顯示圖片
 function previewImg(obj) {
    window.open(obj.src);
  }

以上這篇Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

一些常見(jiàn)的TypeScript面試題匯總
TS是強(qiáng)類(lèi)型的JS超集,支持ES6語(yǔ)法,支持面向?qū)ο缶幊痰母拍?如類(lèi)、接口、繼承、泛型等,下面這篇文章主要給大家介紹了關(guān)于一些常見(jià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
最常見(jiàn)和最有用的字符串相關(guān)的方法詳解
本文主要介紹了最常見(jiàn)和最有用的字符串相關(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