信有小伙伴在做網(wǎng)站時有這樣的應用場景，對于某張圖片有可能我們在頁面上展示時顯示的是縮略圖。而用戶有時需要查看原圖的場景。

之前給一個一朋友改版網(wǎng)站時，他們網(wǎng)站使用的是直接連接到原圖。瀏覽器又打開一個標簽頁來顯示這張圖片。顯得不太友好。直接在頁面本身來彈出原圖的話相對來說比較符合用戶體驗。

那么如何在原本頁面上打開原圖呢？

首先我們需要安裝layui，我們要使用它的彈出層組件。

在需要使用的頁面引入layui的css和js后。就可以開始操作了。

在需要彈出原圖的圖片上新增一個onclick方法。方法名可以自定義。在方法里面我們將原圖的地址放入，作為參數(shù)可以在調(diào)用的時候得到相應的圖片地址。

使用layer彈出層里面的photos可以將圖片以相冊的形式來展示出來。官方給的樣例是數(shù)組形式的一組相冊，今天我們先來看單個圖片如何彈出。

layer.photos里面的photos我們需要配置里面的data。這個是需要顯示的圖片。根據(jù)文檔你只需要將里面的src傳遞上我們剛才傳遞過來的參數(shù)即可。里面的anim則是彈出圖片的類型，大家可以去試一下。0-6之間的數(shù)字。

到此就可以來看看結(jié)果了。在寫方法之前，一定要將layer在layui中引入一下。