Jquery 点击图片在弹出层显示大图
[转]Jquery 点击图片在弹出层显示大图
使用jquery,
实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断。
效果图片:
1.点击前的效果:
2.点击后的效果:
html代码:
<td width="350"><img height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedImageId}" /><img height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedImageId2}" /><img height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedImageId3}" /> </td><div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"><div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src="" /></div> </div>
JS代码:
<script> $(function(){ $(".pimg").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).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).click(function(){//再次点击淡出消失弹出层 $(this).fadeOut("fast"); }); } </script>
Jquery 点击图片在弹出层显示大图相关推荐
- html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图
使用jquery,实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片如下: 1.点击前的效果: 2.点击后的效果: html代码如下: 弹出层图片 Js代码如下: ...
- html图片显示详情,纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码.html...
纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码 * { box-sizing: border-box; } html, body { height: 100%; background:#ddd ...
- 基于jQuery点击圆形边框弹出图片信息
分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=&q ...
- layui怎样将响应数据展示在页面_layui怎么对弹出层显示数据
layui怎么对弹出层显示数据?下面给大家举个例子:点击查看 function func11() { console.log($.cookie("id")); //iframe窗 ...
- java让弹窗在最上层_layer弹出层显示在top顶层的方法
因为项目框架用了iframe,所以在用layer时,默认layer.open弹出的窗口只能在iframe子窗口区域显示.现在想让layer在父窗口或者说框架的最顶层显示,想到用top.layer.op ...
- 一款基于jQuery外观优雅带遮罩弹出层对话框
今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...
- jQuery引起的用layer弹出层上传文件不能获取文件名的解决(thinkphp5)
一.问题 在用thinkphp5做到用layer弹出层上传文件过程中,一直不能成功.详细代码如下: HTML代码: <div id="importBox" v-show=&q ...
- layer 点击图片缩略图弹出图片原图
项目中有一个需求,点击图片的缩略图可以弹出弹层,查看图片原图:点击关闭按钮或点击遮罩层部分关闭图片 代码实现如下: 项目是单页面,有多处需要用到查看图片详情,于是在主页面放置一个图片弹层的容器 < ...
- jQuery: 仿select下拉框效果,点击空白关闭弹出层,判断是否被mouseover
1. 方法一 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
最新文章
- HBASE强制删除表
- [bzoj4590][Shoi2015]自动刷题机
- 【大数据-Hadoop】Presto
- 程序员如果也能像C罗一样自律和勤奋,必将成为大神!
- ITK:将像素缓冲区导入到图像中
- python矩阵相加_【python矩阵相加怎么做,这可是证明python功能的大好机会】- 环球网校...
- 【数据结构与算法】之深入解析“解码方法”的求解思路与算法示例
- Super-palindrome【字符串+思维】
- 深入分析String类型(一)
- 【Mac】mac 安装Axure RP 8 点不开 就一直跳-后闪退-报错Expected an Int64 but got a System.UInt64
- 电脑无法检查计算机更新,安装win7系统弹出错误提示无法检查更新的方法
- Android学习笔记--Menu菜单的使用
- drf版本控制 和django缓存,跨域问题,
- 9-4 节点取余分区
- 神经网络训练输入数据并行化
- python数字图像处理(13):基本形态学滤波
- IIS错误 ‘80040e21‘ ODBC 驱动程序不支持所需的属性
- 小程序 腾讯兔小巢 对接
- linux上如何把2个或者多个显示器合并为一个显示器
- STM32:Modbus-RTU通讯协议——CRC校验
热门文章
- Android--强大的Toast实现多种效果
- 一个Linux下C线程池的实现
- linux无法创建符号链接 权限不够_Linux 基本命令(看完就会系列)
- linux安装后硬盘变小,Linux硬盘安装步骤
- 阻抗匹配工具_工具 | 9R Fret Polishing Wheels 品丝抛光轮
- mysql新建备份在哪里_navicat for MySQL创建备份计划的详细流程
- html跳转过度,jq实现锚点跳转过度
- 当会打王者荣耀的AI学会踢足球,一不小心拿下世界冠军!
- 干掉Navicat:正版 MySQL 官方客户端真香!
- Apache Shiro 1.6.0 发布!修复绕过授权高危漏洞