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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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文件中是否含有bom的函数
2012/05/31 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
限制复选框的最大可选数
2006/07/01 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
js实现文字向上轮播功能
2017/01/13 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python中的pprint折腾记
2015/01/21 Python
python文件操作相关知识点总结整理
2016/02/22 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python数据集切分实例
2018/12/08 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
python实现抽奖小程序
2020/04/15 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
python实现简单颜色识别程序
2020/02/19 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
合同专员岗位职责
2013/12/18 职场文书
出售房屋委托书范本
2014/09/24 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
优秀党员事迹材料
2014/12/18 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
成人成长感言如何写?
2019/08/16 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL