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实现前端分页功能
Mar 23 jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jquery实现图片轮播器
May 23 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现简单聊天室
Feb 08 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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
如何在PHP中进行身份认证
2006/10/09 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
分享10段PHP常用代码
2015/11/11 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
JavaScript中的类继承
2010/11/25 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
合同专员岗位职责
2013/12/18 职场文书
学校岗位设置方案
2014/01/16 职场文书
大学生军训感想
2014/02/16 职场文书
师范生自荐信模板
2014/05/28 职场文书
2015年女职工工作总结
2015/05/15 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers