基于JS实现点击图片在弹出层显示大图效果
Javascript是个好东西。
Jquery是基于这个好东西的一个强大的库。
今天要实现的功能是基于这两个玩意儿的。
点击图片，在弹出层显示原图。
大概效果是这样的：
上代码：
先是html部分：
<div style="text-align:center;margin-top:200px;">
<img src="https://guanchao.site/uploads/atricle/5db3a72e49efd.jpeg" alt="" style="width:100px;" id="plus">
</div>
<!-- 弹窗部分代码 -->
<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>
<!-- 弹窗部分代码 -->
Js部分：
$(function(){
$("#plus").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及.pimg
});
$(outerdiv).click(function(){//再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
}
20220617补充：
PC端的图片放大使用上边的代码即可，但是在移动端的时候我们就需要用到两指放大缩小功能，然后还要加上单指移动的功能，
基础代码还是与上边一样，我就不废话了，直接上完整的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.0/jquery.min.js"
type="application/javascript"></script>
</head>
<body>
<div style="text-align:center;margin-top:200px;">
<img src="https://resource.guanchao.site/uploads/atricle/5db513ccbe77f.png" alt="" style="width:100px;" class="plus">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="text-align:center;margin-top:200px;">
<img src="https://resource.guanchao.site/uploads/atricle/5db513ccbe77f.png" alt="" style="width:100px;"
class="plus">
</div>
<!-- 弹窗部分代码 -->
<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>
<!-- 弹窗部分代码 -->
</body>
</html>
<script src="https://dev.mools.net/lims/web/common/js/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
$(function () {
$(".plus").click(
function () {
var _this = $(this);//将当前的pimg元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
//移动端手指移动事件,如果不需要移动端手指事件,这一部分内容可以不加,只要上面两行代码以及imgShow()事件
var eleImg = document.querySelector('#innerdiv');
var store = {
scale: 1
};
//定义移动端的初始位置
var position_top, position_left, pageX, pageY;
// 缩放事件的处理
//事件开始
eleImg.addEventListener('touchstart', function (event) {
event.preventDefault();//阻止默认事件，防止底部内容滚动
//在触屏设备下，要判断是单指还是多指操作，可以通过event.touches数组对象的长度判断。
var touches = event.touches;
var events = touches[0];//单指
var events2 = touches[1];//双指
if (touches.length == 1) { //单指操作
pageX = Number(events.pageX);
pageY = Number(events.pageY);
store.moveable = true;
var _obj = $('#innerdiv');
// .css获取的值是字符串
position_left = parseFloat(_obj.css('left')
.split('px'));
position_top = parseFloat(_obj.css('top')
.split('px'));
} else {
// 第一个触摸点的坐标
store.pageX = events.pageX;
store.pageY = events.pageY;
store.moveable = true;
if (events2) {
store.pageX2 = events2.pageX;
store.pageY2 = events2.pageY;
}
store.originScale = store.scale || 1;
}
}, { passive: false }); //passive: false必须加上,否则控制台报错
//开始移动
document.addEventListener('touchmove', function (event) {
// event.preventDefault();//阻止默认事件，防止底部滚动
if (!store.moveable) {
return;
}
var touches = event.touches;
var events = touches[0];
var events2 = touches[1];
if (touches.length == 1)
{
var pageX2 = Number(events.pageX);
var pageY2 = Number(events.pageY);
//控制图片移动
$('#innerdiv').css({
'top': position_top + pageY2 - pageY + 'px',
"left": position_left + pageX2 - pageX + 'px'
})
}
else
{
// 双指移动
if (events2) {
// 第2个指头坐标在touchmove时候获取
if (!store.pageX2) {
store.pageX2 = events2.pageX;
}
if (!store.pageY2) {
store.pageY2 = events2.pageY;
}
// 获取坐标之间的距离
var getDistance = function (start, stop) {
//用到三角函数
return Math.hypot(stop.x - start.x,
stop.y - start.y);
};
// 双指缩放比例计算
var zoom = getDistance({
x: events.pageX,
y: events.pageY
}, {
x: events2.pageX,
y: events2.pageY
}) / getDistance({
x: store.pageX,
y: store.pageY
}, {
x: store.pageX2,
y: store.pageY2
});
// 应用在元素上的缩放比例
var newScale = store.originScale * zoom;
// 最大缩放比例限制
if (newScale > 3)
{
newScale = 3;
}
// 记住使用的缩放值
store.scale = newScale;
// 图像应用缩放效果
eleImg.style.transform = 'scale('
+ newScale + ')';
}
}
}, { passive: false });//*/
document.addEventListener('touchend', function () {
store.moveable = false;
delete store.pageX2;
delete store.pageY2;
});
document.addEventListener('touchcancel', function () {
store.moveable = false;
delete store.pageX2;
delete store.pageY2;
});
});
//移动端手指页面结束
});
//遮罩层图片位置
function imgShow(outerdiv, innerdiv, bigimg, _this) {
//这是刚才判断是否PC端的函数事件
var flag = IsPC();
console.log(flag);
var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
$(bigimg).attr("src", src);//设置#bigimg元素的src属性
/*获取当前点击图片的真实大小，并显示弹出层及大图*/
$("<img/>").attr("src", src).load(function () {
//注意在使用这种方法获取窗口高度和宽度的时候,
//务必在html页面最上方加上一句<!DOCTYPE html>,否则获取屏幕高度时会出问题
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 {//如果图片真实高度和宽度都符合要求，高宽不变
if (flag == false) {
imgWidth = realWidth;
imgHeight = realHeight;
} else if (realWidth >= 1000) { //这里我怕图片太大又做了个判断
imgWidth = realWidth;
imgHeight = realHeight;
} else {
imgWidth = realWidth * 2;
imgHeight = realHeight * 2;
}
}
$(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");
});
};
function IsPC()
{
var sUserAgent = navigator.userAgent;
if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('Symbian') > -1) {
return false;
}
else {
return true;
}
}
</script>
效果如下图所示：
到此这篇关于基于JS实现点击图片在弹出层显示大图效果的文章就介绍到这了,更多相关JS弹出层显示大图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
js实现鼠标移入图片放大效果
使用原生js编写一个鼠标移入图片放大效果,供大家参考,具体内容如下 目标 给图片添加鼠标移动放大方法效果,移到哪里放大哪里 先看看效果是不是你想要的,再看代码 移入前 移入后 html <!-- css看着写 --> <div class="Box" style="width:200px;height:200px;border:1px solid #f00;position: relative;top:0;left:0;overflow: hidde
-
Javascript查看大图功能代码实现
功能与实现 点击小图片可以查看大图 实现就是把大图放置在顶层(z-index大于当前页面的),并且还可以加一些额外的比如透明度什么的. 大图以动画的形式出现 动画就是css动画样式了,可以自定义动画,将图片一点点变大,发挥想象了. 代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<
-
javascript实现点击小图显示大图
本文实例为大家分享了javascript实现点击小图显示大图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helve
-
javascript实现商品图片放大镜
优化原因 现在的电商商城项目解决的主要是购买商品的问题,那么购买商品主要要看清楚商品表面外形的主要特征和细节,如果图片处理过小,或者细节过于模糊,就需要做一个商品高清图片放大局部的功能. 技术关键点 1.左侧和上侧距离,在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我们叫它们 ClientX 和 ClientY,而左上侧鼠标没有略过的位置实际上是一个点,我们拖动放大块时,它会由一个点变成一个方块,这个
-
JS版图片放大镜效果
本文实例为大家分享了JS实现图片放大镜效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; } .box{ position: relative; width:350px; h
-
JavaScript实现淘宝网图片的局部放大功能
本文实例为大家分享了JavaScript实现淘宝网图片的局部放大的具体代码,供大家参考,具体内容如下 要实现的效果如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo1</title> <style type="text/css"> *{
-
基于JS实现点击图片在弹出层显示大图效果
Javascript是个好东西. Jquery是基于这个好东西的一个强大的库. 今天要实现的功能是基于这两个玩意儿的. 点击图片,在弹出层显示原图. 大概效果是这样的: 上代码: 先是html部分: <div style="text-align:center;margin-top:200px;"> <img src="https://guanchao.site/uploads/atricle/5db3a72e49efd.jpeg" alt=&quo
-
js点击任意区域弹出层消失实现代码
本文实例为大家分享了js点击任意区域弹出层消失的具体代码,供大家参考,具体内容如下 采用jquery element.parents();判断点击区域是否在弹出层上面或者在按钮上面,否则让弹出层消失. 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head
-
JS实现响应鼠标点击动画渐变弹出层效果代码
本文实例讲述了JS实现响应鼠标点击动画渐变弹出层效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
-
JS实现点击li标签弹出对应的索引功能【案例】
本文实例讲述了JS实现点击li标签弹出对应的索引功能.分享给大家供大家参考,具体如下: 需求:点击li标签,弹出对应的索引 先看效果: html结构: <ul id="ul1"> <li>我是li标签1</li> <li>我是li标签2</li> <li>我是li标签3</li> <li>我是li标签4</li> <li>我是li标签5</li> <
-
JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)
本文实例讲述了JS实现常见的TAB.弹出层效果.分享给大家供大家参考.具体如下: 这里演示tab活页夹(网页标签),斑马线,遮罩层.弹出层的简单实现,里面的JS文件,可下拉保存为JS代码调用即可,也可以拷贝在本网页中使用.这个小网页囊括了目前网上流行的风页标签.弹出层以及斑马线效果,很实用啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/ 具体代码如下: <!DOCTYPE html PU
-
js实现仿Discuz文本框弹出层效果
本文实例讲述了js实现仿Discuz文本框弹出层效果.分享给大家供大家参考.具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字.图片.表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内.本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D
-
JS实现仿微博可关闭弹出层效果
本文实例讲述了JS实现仿微博可关闭弹出层效果.分享给大家供大家参考.具体如下: 这里推荐给大家一款真心不错的JavaScript网页弹出层,仿微博JS弹出层可关闭,点击按钮才弹出来,可制作成网页客服之类的,比如在网页的右侧显示这么一个按钮,当点击的时候,展开层,显示客服QQ,效果还是很不错的! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-weibo-close-able-alert-codes/ 具体代码如下: <!DOCTYPE
-
jQuery实现点击任意位置弹出层外关闭弹出层效果
在之前做项目的时候经常会在主页面上点击某个按钮,右侧弹出一个div输出对应内容的详细信息.此时,我是希望在鼠标点击弹出层外的时候关闭该弹出层,主要思想就是: 找到鼠标点击的那个元素 判断这个元素是否在指定区域内,其实就是判断它的父元素是不是弹出层 如果不是就对弹出层进行hide,如果是就不进行任何操作 具体实现 该代码需要使用jQuery,代码如下: $(document).mousedown(function(e){ if($(e.target).parent("#info").le
-
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用. 效果展示 源码下载 HTML 由于本例UI部分使用了Bootstrap,以及使用jQuery插件,因此需要事先载入相关文件,推荐大家使用相关的CDN资源. <link rel="stylesheet" hre
-
layer弹出层显示在top顶层的方法
因为项目框架用了iframe,所以在用layer时,默认layer.open弹出的窗口只能在iframe子窗口区域显示.现在想让layer在父窗口或者说框架的最顶层显示,想到用top.layer.open或者parent.layer.open,但是没反应.后面想到应该是在父页面中没有导入layer.js文件,导入后就能正常显示在父窗口页面区域了. 显示在顶层窗口 top.layer.open({ type: 2, title: '标题', shadeClose: true, shade: 0.3