js点击图片实现查看大图简单方法
更新时间：2023年06月23日 09:33:35 作者：草巾冒小子
今天开发的时候,遇到要点击缩略图之后显示图片的大图查看,所以本文给大家分享下,这篇文章主要给大家介绍了关于js点击图片实现查看大图的简单方法,需要的朋友可以参考下
js 点击图片实现查看大图
点击图片放大缩小（遮罩）
截图：点击放大，并显示ico放大镜
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击图片放大缩小（遮罩）</title>
<style type="text/css">
<style type="text/css">
.min {
max-height:25px;
}
.showImg{cursor: zoom-in;}
#bigImg{cursor: zoom-out;}
</style>
</style>
</head>
<body>
<!-- 我图片是放在一个td里面的（当然还有其它内容...）-->
<table>
<td>
<img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609140112.png" width="200"/>
</td>
<td>
<img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609140342.png" width="200"/>
</td>
<td>
<img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609142248.png" width="200"/>
</td>
<td>
<img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609160600.png" width="200"/>
</td>
<td>
<img id="showImg" class="showImg min" src="phpcms问题统计/QQ截图20210609160901.png" width="200"/>
</td>
</table>
<!-- 遮罩区域（先将div隐藏）-->
<div id="back-curtain" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.5);z-index:998;width:100%;display:none;">
<!--放大后的图片-->
<div id="imgDiv" style="position:absolute;">
<img id="bigImg" src="" />
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// 图片点击放大
$('.showImg').on('click', function(){
imgShow("#imgDiv", "#bigImg", $(this), "#back-curtain");
});
function imgShow(imgDiv, bigImg, _this, curtain) {
// 图片路径
var src = _this.attr("src");
$(bigImg).attr("src", src);
// 加载图片,获取当前点击图片的真实大小
$("<img/>").attr("src", src).load(function(){
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var realWidth = this.width;
var realHeight = this.height;
var imgWidth, imgHeight;
var scale = 0.8;
if (realHeight > windowHeight * scale) {
imgHeight = windowHeight * scale;
imgWidth = imgHeight / realHeight * realWidth;
if (imgWidth > windowWidth * scale) {
imgWidth = windowWidth * scale;
}
} else if (realWidth > windowWidth * scale) {
imgWidth = windowWidth * scale;
imgHeight = imgWidth / realWidth * realHeight;
} else {
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigImg).css({'width':imgWidth});
//计算图片与窗口左边距
var left = (windowWidth - imgWidth) / 2;
//计算图片与窗口上边距
var top = (windowHeight - imgHeight) / 2;
// 图片位置
$(imgDiv).css({'top':top, 'left':left});
// 图片淡入
$(curtain).fadeIn("fast");
// 遮罩效果
$(curtain).css({
'position':'fixed',
'overflow-y':'auto',
'width':'100%',
'height':'100%',
'z-index':'998'
}).show();
});
// 点击图片或遮罩，图片淡出
$(curtain).on('click', function(){
$(this).fadeOut("fast");
});
}
</script>
</body>
</html>总结
到此这篇关于js点击图片实现查看大图的文章就介绍到这了,更多相关js点击图片查看大图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解JavaScript的另类写法的相关资料,需要的朋友可以参考下2016-04-04
比较数组中数值的大小是比较常见的操作，本文主要介绍了javascript实现数组最大值和最小值的6种方法，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
微信小程序的开发过程中,有时前端需要获取到openId来使用,下面这篇文章主要给大家介绍了关于微信小程序获取用户openid的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
Javascript操作表格 包括获取值，创建表格2009-06-06
这篇文章主要为大家详细介绍了微信小程序实现多张图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要为大家介绍了mongoose之bulkWrite操作使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最近在项目中遇到这样的需求：求字符串'nininihaoa'中出现次数最多字符。怎么实现呢？下面小编给大家分享具体实现代码，需要的朋友参考下吧2017-02-02
这篇文章主要为大家详细介绍了JavaScript Canvas编写炫彩的网页时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
下面小编就为大家带来一篇JS全角与半角转化实例(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了ES6基础之默认参数值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
最新评论