搜索

首页  >  问答  >  正文

javascript - 前端如何实现 文章里的配图 点击弹出可放大 再点击缩回

最近的项目中,有个会员发表的文章,文章在手机端显示插图有时候需要放大观看,不能点击放大。

这里能操作的只有img标签。

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

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

})

给img添加a标签href写img的路径,弹出图片,但是没办法返回,求解

类似如图所示,这个前端怎么实现或者插件!

过去多啦不再A梦过去多啦不再A梦2774 天前1042

全部回复(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
  • 取消回复