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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
基于jQuery拖拽事件的封装
Nov 29 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算开始时间到过期时间的相隔的天数
2011/01/12 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python获取脚本所在目录的正确方法
2014/04/15 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Python3多线程基础知识点
2019/02/19 Python
PyTorch基本数据类型(一)
2019/05/22 Python
Python Django 命名空间模式的实现
2019/08/09 Python
python 创建一维的0向量实例
2019/12/02 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
Python新手学习raise用法
2020/06/03 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
英国香水店:The Perfume Shop
2017/03/27 全球购物
毕业自我鉴定怎么写
2014/03/25 职场文书
清明节随笔
2015/08/15 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python