点击图片显示图片放大的弹窗

1.给需要放大的图片标签上加个类比如class="pimg"

同时，写需要弹出的盒子以及需要显示的内容，达到模态框的作用。代码如下：

<div><img src="img/logo.png" alt="" class="pimg">
</div><div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:99999;width:100%;height:100%;display:none;"><div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src=""/><div class="innerclose">×</div></div>
</div>

2.jQuery设置弹窗的效果，代码如下：

$(".pimg").on('click', function() {var _this = $(this);//将当前的pimg元素作为_this传入函数imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});function imgShow(outerdiv, innerdiv, bigimg, _this) {var src = _this.attr("src");//获取当前点击的pimg元素中的src属性$(bigimg).attr("src", src);//设置#bigimg元素的src属性/*获取当前点击图片的真实大小，并显示弹出层及大图*/$("<img/>").attr("src", src).on('load', function() {var windowW = $(window).width();//获取当前窗口宽度var windowH = $(window).height();//获取当前窗口高度var realWidth = this.width;//获取图片真实宽度var realHeight = this.height;//获取图片真实高度var imgWidth, imgHeight;var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放if (realHeight > windowH * scale) {//判断图片高度imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度imgWidth = windowW * scale;//再对宽度进行缩放}} else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度} else {//如果图片真实高度和宽度都符合要求，高宽不变imgWidth = realWidth;imgHeight = realHeight;}$(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距$(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg});$(outerdiv).on('click', function(){//再次点击淡出消失弹出层$(this).fadeOut("fast");});
}

3.点击X来关闭弹窗，样式如下

.innerclose{position:absolute;top: -35px;right: -29px;z-index: 4;font-size: 40px;color: #fff;cursor:pointer;
}

效果如下：

点击图片显示图片放大的弹窗相关推荐

Android之按钮点击事件——显示图片隐藏图片
哈喽!时隔两个月,我又和大家见面啦! 今天,我要分享的内容一如既往的很基础,即关于Android的按钮点击事件--显示图片&&隐藏图片,它的执行过程比较简单,所以这里我就不放什么图片或 ...
html单击图片效果显示,html点击文字显示图片
这个是网页显示,图片是不需要下载的. 代码: 点击文字显示图片 ul { width: 400px; height: 600px; border-style: solid; border-width: ...
html点击文字显示图片
这个是网页显示,图片是不需要下载的. 代码: <html> <head> <title>点击文字显示图片</title> <meta http-e ...
python gui按顺序显示图片_python tkinter GUI绘制,以及点击更新显示图片代码
tkinter 绘制GUI简单明了,制作一些简单的GUI足够,目前遇到的一个问题是不能同时排列显示多幅图片(目前没找到同时显示解决方法), 退而求其次,改成增加一个update按钮,每次点下按钮自动更 ...
Tkinter(二) ｜点击按钮显示图片
解决办法: 出现的问题 from tkinter import * from PIL import Image, ImageTkroot = Tk() root.title('按钮点击加载图片') d ...
android点击按钮弹出图片,用android做的一个简单的点击按钮显示图片的程序
其实,在这之前我已经做了一个点击按钮的小程序,只不过它只是用来在界面上显示一些文字或者是用一个对话框来显示内容.按理说,做显示图片应该是不会有太大的问题了,可是问题还是来了.在我把这些个问题解决之后, ...
java图片显示图片上传
今天要说的是图片上传:上传图片的过程.注(和dao-> Controller层只需要写普通的保存就可以了,图片上传是在jsp页面和控制器的,看下面代码就知道了) 1, 上传图片后在指定的地方显示 ...
java swing awt绘制一个图片查看器图片显示图片控件
感谢 java图片查看器的代码 java似乎没有一个名字叫图片控件的控件,使用swing 的Label显示图片他的代码如下: package swing.draw; import java.aw ...
python gui如何输入图片_python tkinter GUI绘制,以及点击更新显示图片代码
tkinter 绘制GUI简单明了,制作一些简单的GUI足够,目前遇到的一个问题是不能同时排列显示多幅图片(目前没找到同时显示解决方法), 退而求其次,改成增加一个update按钮,每次点下按钮自动更 ...

点击图片显示图片放大的弹窗

点击图片显示图片放大的弹窗相关推荐

最新文章

热门文章