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库冲突的完美解决办法
May 20 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
解析jquery中的ajax缓存问题
2013/12/19 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
Python素数检测的方法
2015/05/11 Python
Python易忽视知识点小结
2015/05/25 Python
python去掉行尾的换行符方法
2017/01/04 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
Python打印不合法的文件名
2020/07/31 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
仓库主管岗位职责
2014/03/02 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
产品销售计划书
2014/05/04 职场文书
伦敦奥运会口号
2014/06/13 职场文书
财政局个人总结
2015/03/04 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
停发工资证明范本
2015/06/12 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
Go 内联优化让程序员爱不释手
2022/06/21 Golang