搜尋

首頁  >  問答  >  主體

javascript - 前端如何實作 文章裡的配圖 點選彈出放大 再點選縮回

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

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

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

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

})

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

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

#
过去多啦不再A梦过去多啦不再A梦2761 天前1031

全部回覆(5)我來回復

  • 三叔

    三叔2017-06-26 10:53:46

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

    回覆
    0
  • 漂亮男人

    漂亮男人2017-06-26 10:53:46

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

    回覆
    0
  • 阿神

    阿神2017-06-26 10:53:46

    想要自己實現的話

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

    可以換個思路

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

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

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

    來決定是跳轉還是返回

    回覆
    0
  • 欧阳克

    欧阳克2017-06-26 10:53:46

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

    回覆
    0
  • 滿天的星座

    滿天的星座2017-06-26 10:53:46

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

    回覆
    0
  • 取消回覆