最近的项目中,有个会员发表的文章,文章在手机端显示插图有时候需要放大观看,不能点击放大。
这里能操作的只有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,居中等。
最后补充一点,遮罩层的层级应该是最高的。