javascript – So implementieren Sie das Frontend-Bild in den Artikel. Klicken Sie zum Vergrößern auf das Popup und dann zum Verkleinern.
过去多啦不再A梦
过去多啦不再A梦 2017-06-26 10:51:46
0
5
956

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!

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

Antworte allen(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,居中等。
最后补充一点,遮罩层的层级应该是最高的。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!