項目上需要實現(xiàn)圖片預(yù)覽功能,頁面展示圖片的預(yù)覽小圖,點擊時彈出層展示原圖,可以點擊上一張和下一張等效果

1.本文將簡單具體介紹實現(xiàn)的全過程,前后臺代碼和需要用到的插件

2.先上效果圖

加載頁面的效果

設(shè)置每個圖片的預(yù)覽效果,可自定義尺寸,當(dāng)點擊圖片時

原圖在頁面中間彈出,可以點擊灰色部分或者圖片右上角的? X? 號關(guān)閉

?

項目用到的前端插件? ?jquerygalpop,到官網(wǎng)去下載

http://plugins.jquery.com/galpop/

準備完畢后將插件放到項目中,在需要的頁面引入即可

簡單的前臺頁面寫法

這各頁面是一個小demo,并不是我項目中的寫法,但是稍加改動即可用在項目中,

第一步:引入插件

第二部:寫一個a標簽,路徑上可以寫一個圖片路徑也可以寫一個請求,到后臺讀取圖片流返回到前臺

第三步:a標簽內(nèi)其他屬性加上

第四部:a標簽體內(nèi)寫一個img標簽,用來預(yù)覽,如果不要要預(yù)覽則不用寫,路徑也是同上,寫一個圖片地址或請求,寬高等屬性自定義即可

第五部:調(diào)用一下galpop()方法,如上圖展示的就可以,這樣前臺頁面就準備完畢

第六步:如果前端頁面展示的圖片需要從后臺讀取,則路徑要寫一個請求,后臺代碼非常簡單,如下

6.1前臺請求

路徑上寫的是一個請求,傳一個uuid參數(shù)

6.2后臺響應(yīng)

這樣就實現(xiàn)了

如果應(yīng)用到項目中,發(fā)現(xiàn)沒有 向上、向下、加載、關(guān)閉 的按鈕圖標,說明有圖片沒有引入

在項目中將圖標的圖片引入

galpop文件夾下是js和css插件

images下是四個圖標文件,具體要看你項目中加載這四個圖標的路徑,根據(jù)路徑創(chuàng)建文件夾將圖標放入,即可自動引入

?

?

總結(jié)

以上是生活随笔為你收集整理的java实现预览图片,点击实现下一张的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。