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

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

2.先上效果圖

加載頁面的效果

設置每個圖片的預覽效果,可自定義尺寸,當點擊圖片時

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

?

項目用到的前端插件? ?jquerygalpop,到官網去下載

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

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

簡單的前臺頁面寫法

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

第一步:引入插件

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

第三步:a標簽內其他屬性加上

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

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

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

6.1前臺請求

路徑上寫的是一個請求,傳一個uuid參數

6.2后臺響應

這樣就實現了

如果應用到項目中,發現沒有 向上、向下、加載、關閉 的按鈕圖標,說明有圖片沒有引入

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

galpop文件夾下是js和css插件

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

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。