最近的專案中,有個會員發表的文章,文章在手機端顯示插圖有時候需要放大觀看,不能點擊放大。
這裡能操作的只有img標籤。
$("img").click(function(){
$(this).wrap('<a href='+$(this)[0].src+'></a>')
})
給img添加a標籤href寫img的路徑,彈出圖片,但沒辦法返回,求解
類似如圖所示,這個前端怎麼實作或外掛!
點擊圖片新建一個遮罩層 遮罩層內圖片的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,居中等。 最後補充一點,遮罩層的層級應該是最高的。
點擊圖片新建一個遮罩層 遮罩層內圖片的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,居中等。
最後補充一點,遮罩層的層級應該是最高的。