jquery实现点击图片放大功能

1、准备一个大图的位置
设置样式属性

<div id="outerdiv" style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 2; width: 100%; height: 100%; display: none;"><div id="innerdiv" style="position: absolute;"><img id="bigimg" style="border: 5px solid #fff;" src="" /></div>
</div>

2、给图片设置 οnclick="" 事件

<div><img src="Photo/bg-88a9758.jpg" onclick="Big(this)" style="width:100px;height:100px" />
</div>

3、写jquery方法来放大图片

function Big(obj) {imgShow("#outerdiv", "#innerdiv", "#bigimg", obj);}function imgShow(outerdiv, innerdiv, bigimg, _this) {var src = _this.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及.pimg  });$(outerdiv).click(function () {//再次点击淡出消失弹出层  $(this).fadeOut("fast");});}

效果图：

点击后：

jquery实现点击图片放大功能相关推荐

Css+Jquery实现点击图片放大缩小预览图片预览查看大图
要求点击一张图片,图片就会放大,查看大图,点击空白处就会隐藏大图,回到缩略图. 技术要点主要是Jquery进行元素的显示与隐藏. 代码 <!DOCTYPE html> <html ...
超简单jq完成点击图片放大功能
后台小伙伴给的需求,本想找找类似的插件使用一下算了,想了想这个功能好像也不是很难实现,况且安装插件要先查找很多,然后筛选自己合适的,下载,导入,太麻烦了,不如自己手写. 基本需求是引入 jquery. ...
jQuery实现点击图片放大,鼠标滑轮控制缩放
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
jQuery插件Magnify放大镜实现javascript图片放大功能
jQuery插件Magnify放大镜实现javascript图片放大功能博客所有文章均属原创作品,如有转载,请注明作者:biuuu,来源:http://www.biuuu.com/?p=459 有时 ...
jquery 实现点击图片居住放大缩小
jquery 实现点击图片居住放大缩小该功能是基于jquery实现的,所以第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调 ...
jquery 点击图片放大，带上下一张，可通过滚动鼠标进行图片缩放
<?php /*** Created by PhpStorm.* User: 28010* Date: 2022/1/17* Time: 13:50*** 1.这里图片的数据是从数据库里面查询取 ...
点击图片放大缩小功能
1.点击图片放大缩小的思路图片部分: <table><div><img style="width:62px;height:83px;display:block ...
jquery点击图片放大效果
点击图片放大效果无非就是创建一个大容器,点击小图片获取图片路径存放到大容器里. 接下来看一下效果图 HTML结构 <img class="enlargeImg" width= ...
js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
html 图片放大缩小轮播,jQuery左右滚动支持图片放大缩略图图片轮播代码分享
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播 ...

jquery实现点击图片放大功能

jquery实现点击图片放大功能相关推荐

最新文章

热门文章