javascript - 前端如何實作 文章裡的配圖 點選彈出放大 再點選縮回
过去多啦不再A梦
过去多啦不再A梦 2017-06-26 10:51:46
0
5
1002

最近的專案中,有個會員發表的文章,文章在手機端顯示插圖有時候需要放大觀看,不能點擊放大。

這裡能操作的只有img標籤。

$("img").click(function(){

#
$(this).wrap('<a href='+$(this)[0].src+'></a>')

})

給img添加a標籤href寫img的路徑,彈出圖片,但沒辦法返回,求解

類似如圖所示,這個前端怎麼實作或外掛!

#
过去多啦不再A梦
过去多啦不再A梦

全部回覆(5)
三叔

點擊圖片新建一個遮罩層 遮罩層內圖片的src等於你點擊目標的src

漂亮男人

可以看看jquery關於圖片效果的這類外掛。直接引入你的項目,然後做點配置,就能實現了。
像這種效果:http://www.jq22.com/yanshi6536

阿神

想要自己實現的話

我看你的意思是、點擊圖片之後、給圖片包了一層a標籤

可以換個思路

點擊之後使用location.href跳轉、這樣比較容易在js裡判斷是跳轉還是回傳

彈出之後的大圖是有黑色背景的、最容易讓用戶懂的其實用戶可以點擊黑色背景返回、

背景和img的層級關係弄好了、用event.target拿到點擊的到底是圖片還是黑色背景、

來決定是跳轉還是返回

学霸

你說的是這種外掛 http://refined-x.com/Flow-UI/...

滿天的星座

沒寫過行動端,但寫過pc端類似效果。
方法就是加一層遮罩層,一般情況下是隱藏的。點擊圖片時,遮罩層toggle(),然後將圖片的src屬性賦值到遮罩層的img。
當然要設定遮罩層img的樣式,如:max-width,max-height,居中等。
最後補充一點,遮罩層的層級應該是最高的。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板