jQuery实现的点击图片居中放大缩小功能示例


Posted in jQuery onJanuary 16, 2019

本文实例讲述了jQuery实现的点击图片居中放大缩小功能。分享给大家供大家参考,具体如下:

该功能是基于jquery实现的,所以

第一步则是引入jquery

jquery下载地址:https://jquery.com/download/

或者使用此时调试的版本(3版本)

jQuery3.2.1文件点击此处本站下载

第二步:准备HTML文件

<div id="outerdiv" class="wrap">
  <div id="innerdiv" style="position:absolute;">
   <img id="bigimg" style="border:5px solid #fff;" src=""/>
  </div>
</div>

第三步:准备style

.wrap {
 position: fixed;
 top: 0;
 left: 0;
 background: rgba(0, 0, 0, 0.7);
 z-index: 2;
 width: 100%;
 height: 100%;
 display: none;
}

第四步:编写可以放大缩小的js

$(function(){
  $(".goal_img").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及.goal_img
 });
 $(outerdiv).click(function(){//再次点击淡出消失弹出层
  $(this).fadeOut("fast");
 });
}

通过以上简单的基本即可实现jquery 实现点击图片居住放大缩小。

上述代码有参考多个牛人的整理的。仅供学习记录,备后续开发学习使用。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 #jQuery
jQuery实现的中英文切换功能示例
Jan 11 #jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 #jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 #jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 #jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 #jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 #jQuery
You might like
用PHP动态创建Flash动画
2006/10/09 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
深入理解PHP内核(一)
2015/11/10 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
js数组的操作详解
2013/03/27 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
python的几种开发工具介绍
2007/03/07 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python 同时读取多个文件的例子
2019/07/16 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
波兰补充商店:Muscle Power
2018/10/29 全球购物
网络安全方面的面试题
2015/11/04 面试题
高中毕业自我鉴定
2013/12/13 职场文书
社区母亲节活动记录
2014/03/06 职场文书
小学生综合素质评语
2014/04/23 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
新闻通讯稿模板
2015/07/22 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技