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点击图片放大,再点缩小(转)相关推荐
- jquery 点击图片放大,带上下一张,可通过滚动鼠标进行图片缩放
<?php /*** Created by PhpStorm.* User: 28010* Date: 2022/1/17* Time: 13:50*** 1.这里图片的数据是从数据库里面查询取 ...
- jquery点击图片放大效果
点击图片放大效果无非就是创建一个大容器,点击小图片获取图片路径存放到大容器里. 接下来看一下效果图 HTML结构 <img class="enlargeImg" width= ...
- html中点击照片时放大缩小,基于jquery实现一张图片点击鼠标放大再点缩小
. 代码如下: var isopen = false; var newImg; var w = 200; //将图片宽度+200 var h = 200; // 将图片高度 +200 $(docume ...
- 点击图片放大缩小功能
1.点击图片放大缩小的思路 图片部分: <table><div><img style="width:62px;height:83px;display:block ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
- js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片 近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观 存在两个问题 1.点击查看后,电子照片会变形 ...
- Jquery 点击图片在弹出层显示大图
[转]Jquery 点击图片在弹出层显示大图 使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: h ...
- html手机端点击图片放大并根据手势缩放
手机端实现点击图片放大根据手势放大缩小 效果如下 进入页面 背景是白色的 点击图片后放大并居中背景变为黑色 效果如下 可以根据手势缩放 演示完毕,上代码 需要先引入一个js文件 网盘链接: https ...
- html+js 点击图片放大、点击图片全屏
html 点击图片放大,图片全屏,再点击关闭全屏,我这里直接整理成一个js,使用方便. 使用步骤: 1.引用 jq 2.引用 imgEnlarge.js. 3.没了. 直接上代码,这个是测试代码. & ...
最新文章
- 去除字符串中所有的逗号
- C++ - 模板函数须要类型转换时使用友元(friend)模板函数
- maskrcnn还可以加网络吗_桃子加蜂蜜可以榨汁吗?桃子和蜂蜜可以一起吃吗?原来可以这样吃...
- 这代码写的跟狗屎一样!怎么优化?
- mPaaS:全新移动开发平台,只为打造性能更优越的App
- ASP.NET MVC RegisterBundles
- 安师大计算机安全网络,计信学院成功举行网络与信息安全安徽省重点实验室2020年度学术年会...
- mysql maria引擎_MySQL/MariaDB---查询缓存与存储引擎
- 12-linux安装kibana
- 大学计算机python期末考试用什么软件_大学计算机--Python算法实践_章节测验,期末考试,慕课答案查询公众号...
- python用scrapy爬虫豆瓣_Python-用Scrapy爬取豆瓣电影
- windows桌面待办事项_想拒绝拖延症?你还缺一款云同步提醒的的桌面便签软件!...
- License for package Android SDK Build-Tools 28.0.3 not accepted.
- 面向对象编程思想概览(三)继承
- 获取当前时间---年月日时分秒------iOS
- js-通过audioContext实现3D音效
- CountDownLatch、CyclicBarrier实战场景分析(附代码)
- 程序运行时报错NullPointerException(空指针)情况以及解决方法
- Electron Fiddle 通过代理加速下载(Mac)
- _pickle.UnpicklingError: pickle data was truncated