javascript – So implementieren Sie das Frontend-Bild in den Artikel. Klicken Sie zum Vergrößern auf das Popup und dann zum Verkleinern.

Question

In einem aktuellen Projekt wurde ein Artikel von einem Mitglied veröffentlicht. Wenn die Abbildungen des Artikels auf dem Mobiltelefon angezeigt werden, muss man manchmal hineinzoomen, um sie anzuzeigen, und man kann nicht zum Vergrößern klicken.

Das einzige, was hier bedient werden kann, ist das img-Tag.

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

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

})

Fügen Sie img ein Tag href hinzu und schreiben Sie den Pfad von img. Das Bild wird angezeigt, aber es gibt keine Möglichkeit, zurückzukehren. Bitte lösen Sie es

Ähnlich wie im Bild gezeigt, wie man dieses Frontend oder Plug-in implementiert!

Answer 1

点击图片新建一个遮罩层 遮罩层内图片的src等于你点击目标的src

Answer 2

可以看看jquery关于图片效果的这类插件。直接引入进你的项目，然后做点配置，就能实现了。
像这种效果：http://www.jq22.com/yanshi6536

Answer 3

想要自己实现的话

我看你的意思是、点击图片之后、给图片包了一层a标签

可以换一种思路

点击之后使用location.href跳转、这样更容易在js里判断是跳转还是返回

弹出之后的大图是有黑色背景的、最容易让用户懂的其实用户可以点击黑色背景返回、

背景和img的层级关系弄好了、用event.target拿到点击的到底是图片还是黑色背景、

来决定是跳转还是返回

Answer 4

你说的是这种插件吧 http://refined-x.com/Flow-UI/...

Answer 5

没写过移动端，但是写过pc端类似效果。
方法就是加一层遮罩层，一般情况下是隐藏的。当点击图片时，遮罩层toggle(),然后将图片的src属性赋值到遮罩层的img中。
当然要设置遮罩层img的样式，如：max-width，max-height，居中等。
最后补充一点，遮罩层的层级应该是最高的。