jQuery 实现图片点击放大

news/2024/7/11 1:49:54 标签: 前端, jQuery, 图片放大

jQuery__1">jQuery 实现图片点击放大

jsp:

<td class="center"><img id="tupian" class="tupian"
															src="${pd.img_address }" width="40px" height="60px" />
															<br /></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>
//放大图片
	$(function(){  
	       $(".tupian").click(function(){  
	           var _this = $(this);//将当前的tupian元素作为_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");  
	       });  
	   }

http://www.niftyadmin.cn/n/1302009.html

相关文章

SSM框架实现前台复选框选中数据,后台实现批量修改删除

SSM框架实现前台复选框选中数据&#xff0c;后台实现批量修改删除 前端页面 <table id"simple-table"class"table table-striped table-bordered table-hover"style"margin-top:5px;"><thead><tr><th class"center&…

SSM框架poi实现excel导出

SSM框架poi实现excel导出 前台页面 <td style"vertical-align:top;padding-left:2px;"><a class"btn btn-light btn-xs" onclick"toExcel();"title"导出到EXCEL"><i id"nav-search-icon"class"ace-ic…

SSM框架poi实现excel数据导入到MySQL数据库

SSM框架poi实现excel数据导入到MySQL数据库 前端代码 <td style"vertical-align:top;padding-left:2px;"><a class"btn btn-light btn-xs" onclick"fromExcel();" title"从EXCEL导入"><i id"nav-search-icon&qu…

SSM框架实现图片上传

SSM框架实现图片上传 前端代码 <form action"village/${msg }.do" name"Form" id"Form"method"post" enctype"multipart/form-data"><input type"hidden" name"id" id"id" value&q…

junit4实现读取文件名并将读取出来的数据加入到数据库中

junit4实现文件读取出来的内容加入到数据库中 先创建个junit4 如果报错&#xff1a;【Junit】JUnit-4.12使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 导入&#xff1a;hamcrest-core-1.3.jar即可 下一步链接数据库&#xff1a; Class.forName(&qu…

idea没有maven选项,右边窗口找不到

idea没有maven选项&#xff0c;右边窗口找不到 关于Idea中右边的maven projects窗口找不到了如何调出来&#xff1f; 本人总结了三个方法 1、你点击一下你idea界面最左下角的那个小框&#xff0c;maven应该从里面找到 2、 勾选这两个即可 3、点击菜单栏Help->Find Action…

什么是前后端分离

什么是前后端分离 前后端分离 流行的技术&#xff1a;VueSpringBoot 后端时代&#xff1a; 前端只用管理静态页面&#xff1b;html》后端。 模板引擎 JSP 》后端是主力 前后端分离时代&#xff1a; 后端&#xff1a;后端控制层&#xff0c;服务层&#xff0c;数据访问层【…

什么是Swagger,Swagger总结

Swagger Swagger优点 1.号称世界上最流行的Api框架&#xff1b; 2.RestFul Api 文档在线自动生成工具》Api文档与Api定义同步更新&#xff08;写完代码文档就实时更新&#xff09; 3.可以直接运行&#xff0c;可以在线测试Api接口&#xff1b; 4.支持多种语言&#xff08;jav…