点击html内任意图片放大，再点击关闭放大图片

HTML 代码

<div id="outerdiv" style="text-align: center;position: fixed;z-index: 1000;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255,255,255,.9);"><div>关闭</div><img id="bigimg" style="height: auto;width: 46.6325%;border: 0;margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />
</div>

JS代码

<script>//图片放大$("#outerdiv").hide();$(function(){$("img").mouseover(function(){$(this).css("cursor","pointer");});$("img").click(function(){var _this = $(this);//将当前的pimg元素作为_this传入函数imgShow("#outerdiv", "#bigimg", _this);});});function imgShow(outerdiv, bigimg, _this) {var src = _this.attr("src");//获取当前点击的pimg元素中的src属性$("#outerdiv").attr("display", "block");$("#bigimg").attr("src", src);//设置#bigimg元素的src属性$("#outerdiv").fadeIn("fast");$("#outerdiv").click(function () {//再次点击淡出消失弹出层$(this).fadeOut("fast");});}
</script>

点击html内任意图片放大，再点击关闭放大图片相关推荐

vue实现点击按钮展开侧边栏，再点击按钮收起
最近项目里有个需求需要点击按钮实现侧边栏展开收起状态,看了很多,其他实现都是比较复杂的,下方是用最简便的代码实现想要的效果. 如果所示: //侧边栏内容区域 //为了看的方便,只放主要代码,内容根据需 ...
qt实现锁屏功能，即点击锁屏按钮后再点击界面则无效
qt实现锁屏功能,就像我们在使用视频软件的时候,会有一个锁的图标,点击后屏幕就不会被误触. 我想要实现的功能是:在点击了右下角的锁的图标之后,界面上的内容就不能点击了,也就是点击关闭是没有响应的,这样 ...
点击一次变色，再点击变回原色
注意思路:用计数器模2 <body> <div></div> <script type="text/javascript">var ...
原生js实现如下效果：一个按钮，点击它会弹出对话框，但5秒内再点击不会再弹出对话框。5秒后恢复正常。
原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框.5秒后恢复正常. 第一种方式: 使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值.为真或假执 ...
js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
uniapp点击图片放大_想要放大镜将图片放大的效果？你只需这么做即可！
[每天楞一点]的第 46 个知识效果图: 在PicsArt中打开图片,点击[工具]--[图形剪辑]. 选择圆形,通过缩放双指,将其大小调整至合适. 完事后,点击右上角的箭头. 将边框颜色设置为黑色, ...
图片隐写放大放大再放大_放大结论
图片隐写放大放大再放大重点 (Top highlight) A conversation about Zoom, security, and privacy in these times of s ...
html+js 点击图片放大、点击图片全屏
html 点击图片放大,图片全屏,再点击关闭全屏,我这里直接整理成一个js,使用方便. 使用步骤: 1.引用 jq 2.引用 imgEnlarge.js. 3.没了. 直接上代码,这个是测试代码. & ...
textisselectable长按再点击_微信朋友圈如何发布长视频？原来打开这个功能就可以，涨知识了...
微信的朋友圈是我们与朋友家人分享动态的地方,在微信发过视频的小伙伴都知道,微信对发布视频时长时有严格要求的,如果发布的视频超过了15秒的话,是不能发布的. 那么,如何才能在微信朋友圈发布长视频呢?这就 ...

点击html内任意图片放大，再点击关闭放大图片

HTML 代码

JS代码

点击html内任意图片放大，再点击关闭放大图片相关推荐

最新文章

热门文章