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实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery实现穿梭框效果
Jan 19 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
2019十大人气国漫
2020/03/13 国漫
与数据库连接
2006/10/09 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
php中smarty区域循环的方法
2015/06/11 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
Javascript - HTML的request类
2007/01/09 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
python文本数据处理学习笔记详解
2019/06/17 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
幼儿园安全检查制度
2014/01/30 职场文书
自我鉴定总结
2014/03/24 职场文书
公民授权委托书范本
2014/09/17 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
活动总结模板大全
2015/05/11 职场文书