查看大图、html查看大图、js查看大图
$(".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)/;//计算图片与窗口左边距
var h = (windowH-imgHeight)/;//计算图片与窗口上边距
$(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
}); $(outerdiv).click(function(){//再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
}
<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 style="width: 100%;height: 50px;background-color: white;font-size: .8cm;padding-top: 10px;" align="center">
查看图片
</div>
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
</div>
<div style="height: 100%;width: 20%;float: left;">
<img alt="暂无图片" class="pimg" src="${url}${data.driver_url }" style="width: 100%;height: 100%;">
</div>
查看大图、html查看大图、js查看大图
查看大图、html查看大图、js查看大图的更多相关文章
- paip.调试js 查看元素事件以及事件断点
paip.调试js 查看元素事件以及事件断点 ff 26 +firebug 查看不出来.. 360 ,虽然也是chrome 基础,但是开发工具烂阿,也是显示不出来.. 作者Attilax 艾龙, ...
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
- 使用 pdf.js 查看发票时,显示不了台头和印章的解决办法
系统中使用了 pdf.js 来查看 PDF 文件,发现在查看 电子发票时, 缺失了很多信息, 刚开始以为是 PDF.JS 的 BUG, 后来调试发现只需要在 IIS 里添加一个 bcmap 后缀的 m ...
- Linux查看系统信息的一些命令及查看已安装软件包的命令
转自:http://cheneyph.iteye.com/blog/824746 系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看 ...
- MySQL的链接,查看数据库,使用数据库,查看表
MySQL的链接,查看数据库,使用数据库,查看表 mysql> show databases; +--------------------+ | Database | +------------ ...
- (十)Linux查看系统信息的一些命令及查看已安装软件包的命令
转自:http://cheneyph.iteye.com/blog/824746 系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看 ...
- Linux如何查看进程、杀死进程、查看端口等常用命令
查看进程号 1.ps 命令用于查看当前正在运行的进程.grep 是搜索 例如: ps -ef | grep java表示查看所有进程里 CMD 是 java 的进程信息2.ps -aux | grep ...
- 如何查看win10已激活密钥?查看win10已激活完整密钥的方法!
如何查看win10已激活密钥?查看win10已激活完整密钥的方法! HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/Windows NT/CurrentVersion/So ...
- JS查看Object对象的内容
以一个例子来说,下面是他的Object: JS: 如果想直接获取到total的值,那就先把获取到的Json先Eval(),然后json.total就能取到total的值了, 但是如果想取到rows里面 ...
随机推荐
- 2019 云和数据java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.云和数据等公司offer,岗位是Java后端开发,因为发展原因最终选择去了云和数据,入职一年时间了,也成为了面 ...
- vue动态子组件的实现方式
让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <d ...
- python学习之:序列类型 之列表,元组,range
列表 列表是可变序列,通常用于存放同类项目的集合(其中精确的相似程度将根据应用而变化). class list([iterable]) 可以用多种方式构建列表: 使用一对方括号来表示空列表: [ ] ...
- 为什么共进电子会选择APS系统?(APS应用案例)
企业介绍 深圳市共进电子股份有限公司(下文简称,共进电子)自1998年创始,以 “发展企业,培养人才,回馈社会”为宗旨,拥有“T&W”商标.2015年2月登陆上交所A股市场,证券代码为6031 ...
- Spring Boot加载application.properties配置文件顺序规则
SpringApplication会从以下路径加载所有的application.properties文件: 1.file:./config/(当前目录下的config文件夹) 2.file:./(当前 ...
- idea git提交代码步骤(转载)
参考一: https://blog.csdn.net/u013452337/article/details/79956604
- zabbix--远程执行命令
zabbix 远程执行命令 重启应用 服务器 使用远程执行命令可以在某些时候帮我做一些事情,达到轻量级的自动化,比如当 nginx.mysql.php.redis.tomcat.等等应用挂掉时帮我们自 ...
- C++类库开发详解(转)
前言:这是一篇总结性的文章,需要有一点C++和dll基本知识的基础,在网上查阅了很多资料感觉没有一篇详细.具体.全面的dll开发介绍,我这是根据最近项目和网上资料整理出来的,并附带实例的一个总结性的文 ...
- JUnit 4.x 与 5.x 的区别?
区别项 4.x 5.x 手动把测试和测试方法声明为public 需要 不需要 @Test 与JUnit 4的@Test注解不同的是,它没有声明任何属性,因为JUnit Jupiter中的测试扩展是基于 ...
- 2019牛客暑期多校训练营(第五场)B:generator 1 (10进制快速幂)
题意:给定x0,x1,a,b,满足xi=a*xi-1+b*xi-2: 求xn,n<10^(10^6): 思路:10进制快速幂裸题.降幂来写好像也是可以的,但是循环节不是phi(mod),所以数学 ...