整合營銷服務商
電腦端+手機端+微信端=數(shù)據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據同步管理
免費咨詢熱線：
單實用CSS3動畫提示層效果，增強網站的用戶體驗效果！
如圖：
實現(xiàn)代碼
html：
重點css:
信有小伙伴在做網站時有這樣的應用場景，對于某張圖片有可能我們在頁面上展示時顯示的是縮略圖。而用戶有時需要查看原圖的場景。
之前給一個一朋友改版網站時，他們網站使用的是直接連接到原圖。瀏覽器又打開一個標簽頁來顯示這張圖片。顯得不太友好。直接在頁面本身來彈出原圖的話相對來說比較符合用戶體驗。
那么如何在原本頁面上打開原圖呢？
首先我們需要安裝layui，我們要使用它的彈出層組件。
在需要使用的頁面引入layui的css和js后。就可以開始操作了。
在需要彈出原圖的圖片上新增一個onclick方法。方法名可以自定義。在方法里面我們將原圖的地址放入，作為參數(shù)可以在調用的時候得到相應的圖片地址。
使用layer彈出層里面的photos可以將圖片以相冊的形式來展示出來。官方給的樣例是數(shù)組形式的一組相冊，今天我們先來看單個圖片如何彈出。
layer.photos里面的photos我們需要配置里面的data。這個是需要顯示的圖片。根據文檔你只需要將里面的src傳遞上我們剛才傳遞過來的參數(shù)即可。里面的anim則是彈出圖片的類型，大家可以去試一下。0-6之間的數(shù)字。
到此就可以來看看結果了。在寫方法之前，一定要將layer在layui中引入一下。
ip提示層在網頁中經常用到，實現(xiàn)的方法也有很多，今天就來說一種簡易的實現(xiàn)方法！
效果圖：
實現(xiàn)代碼
html+css：
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
