携手创作，共同成长！这是我参与「日新计划 8 月更文挑战」的第6天，点击查看活动详情
Javascript是个好东西。
Jquery是基于这个好东西的一个强大的库。
今天要实现的功能是基于这两个玩意儿的。
点击图片，在弹出层显示原图。
大概效果是这样的：
上代码：
先是html部分：
<divstyle="text-align:center;margin-top:200px;">
<imgsrc="https://www.6hu.cc/files/2022/08/44325-POsc3x.jpeg"alt=""style="width:100px;"id="plus">
</div>
<!--弹窗部分代码-->
<divid="outerdiv"style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<divid="innerdiv"style="position:absolute;">
<imgid="bigimg"style="border:5pxsolid#fff;"src=""/>
</div>
</div>
<!--弹窗部分代码-->
Js部分：
$(function(){
$("#plus").click(function(){
var_this=$(this);//将当前的pimg元素作为_this传入函数
imgShow("#outerdiv","#innerdiv","#bigimg",_this);
});
});
functionimgShow(outerdiv,innerdiv,bigimg,_this){
varsrc=_this.attr("src");//获取当前点击的pimg元素中的src属性
$(bigimg).attr("src",src);//设置#bigimg元素的src属性
/*获取当前点击图片的真实大小，并显示弹出层及大图*/
$("<img/>").attr("src",src).load(function(){
varwindowW=$(window).width();//获取当前窗口宽度
varwindowH=$(window).height();//获取当前窗口高度
varrealWidth=this.width;//获取图片真实宽度
varrealHeight=this.height;//获取图片真实高度
varimgWidth,imgHeight;
varscale=0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
if(realHeight>windowH*scale){//判断图片高度
imgHeight=windowH*scale;//如大于窗口高度，图片高度进行缩放
imgWidth=imgHeight/realHeight*realWidth;//等比例缩放宽度
if(imgWidth>windowW*scale){//如宽度扔大于窗口宽度
imgWidth=windowW*scale;//再对宽度进行缩放
}
}elseif(realWidth>windowW*scale){//如图片高度合适，判断图片宽度
imgWidth=windowW*scale;//如大于窗口宽度，图片宽度进行缩放
imgHeight=imgWidth/realWidth*realHeight;//等比例缩放高度
}else{//如果图片真实高度和宽度都符合要求，高宽不变
imgWidth=realWidth;
imgHeight=realHeight;
}
$(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放
varw=(windowW-imgWidth)/2;//计算图片与窗口左边距
varh=(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端的图片放大使用上边的代码即可，但是在移动端的时候我们就需要用到两指放大缩小功能，然后还要加上单指移动的功能，
基础代码还是与上边一样，我就不废话了，直接上完整的代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<scriptsrc="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.0/jquery.min.js"
type="application/javascript"></script>
</head>
<body>
<divstyle="text-align:center;margin-top:200px;">
<imgsrc="https://www.6hu.cc/files/2022/08/44325-n498nD.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>
<divstyle="text-align:center;margin-top:200px;">
<imgsrc="https://www.6hu.cc/files/2022/08/44325-n498nD.png"alt=""style="width:100px;"
class="plus">
</div>
<!--弹窗部分代码-->
<divid="outerdiv"
style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<divid="innerdiv"style="position:absolute;">
<imgid="bigimg"style="border:5pxsolid#fff;"src=""/>
</div>
</div>
<!--弹窗部分代码-->
</body>
</html>
<scriptsrc="https://dev.mools.net/lims/web/common/js/vconsole.min.js"></script>
<script>
//初始化
varvConsole=newVConsole();
$(function(){
$(".plus").click(
function(){
var_this=$(this);//将当前的pimg元素作为_this传入函数
imgShow("#outerdiv","#innerdiv","#bigimg",_this);
//移动端手指移动事件,如果不需要移动端手指事件,这一部分内容可以不加,只要上面两行代码以及imgShow()事件
vareleImg=document.querySelector('#innerdiv');
varstore={
scale:1
};
//定义移动端的初始位置
varposition_top,position_left,pageX,pageY;
//缩放事件的处理
//事件开始
eleImg.addEventListener('touchstart',function(event){
event.preventDefault();//阻止默认事件，防止底部内容滚动
//在触屏设备下，要判断是单指还是多指操作，可以通过event.touches数组对象的长度判断。
vartouches=event.touches;
varevents=touches[0];//单指
varevents2=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;
}
vartouches=event.touches;
varevents=touches[0];
varevents2=touches[1];
if(touches.length==1)
{
varpageX2=Number(events.pageX);
varpageY2=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;
}
//获取坐标之间的距离
vargetDistance=function(start,stop){
//用到三角函数
returnMath.hypot(stop.x-start.x,
stop.y-start.y);
};
//双指缩放比例计算
varzoom=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
});
//应用在元素上的缩放比例
varnewScale=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;
deletestore.pageX2;
deletestore.pageY2;
});
document.addEventListener('touchcancel',function(){
store.moveable=false;
deletestore.pageX2;
deletestore.pageY2;
});
});
//移动端手指页面结束
});
//遮罩层图片位置
functionimgShow(outerdiv,innerdiv,bigimg,_this){
//这是刚才判断是否PC端的函数事件
varflag=IsPC();
console.log(flag);
varsrc=_this.attr("src");//获取当前点击的pimg元素中的src属性
$(bigimg).attr("src",src);//设置#bigimg元素的src属性
/*获取当前点击图片的真实大小，并显示弹出层及大图*/
$("<img/>").attr("src",src).load(function(){
//注意在使用这种方法获取窗口高度和宽度的时候,
//务必在html页面最上方加上一句<!DOCTYPEhtml>,否则获取屏幕高度时会出问题
varwindowW=$(window).width();//获取当前窗口宽度
varwindowH=$(window).height();//获取当前窗口高度
varrealWidth=this.width;//获取图片真实宽度
varrealHeight=this.height;//获取图片真实高度
varimgWidth,imgHeight;
varscale=0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
if(realHeight>windowH*scale){//判断图片高度
imgHeight=windowH*scale;//如大于窗口高度，图片高度进行缩放
imgWidth=imgHeight/realHeight*realWidth;//等比例缩放宽度
if(imgWidth>windowW*scale){//如宽度扔大于窗口宽度
imgWidth=windowW*scale;//再对宽度进行缩放
}
}elseif(realWidth>windowW*scale){//如图片高度合适，判断图片宽度
imgWidth=windowW*scale;//如大于窗口宽度，图片宽度进行缩放
imgHeight=imgWidth/realWidth*realHeight;//等比例缩放高度
}else{//如果图片真实高度和宽度都符合要求，高宽不变
if(flag==false){
imgWidth=realWidth;
imgHeight=realHeight;
}elseif(realWidth>=1000){//这里我怕图片太大又做了个判断
imgWidth=realWidth;
imgHeight=realHeight;
}else{
imgWidth=realWidth*2;
imgHeight=realHeight*2;
}
}
$(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放
varw=(windowW-imgWidth)/2;//计算图片与窗口左边距
varh=(windowH-imgHeight)/2;//计算图片与窗口上边距
$(innerdiv).css({
"top":h,
"left":w
});//设置#innerdiv的top和left属性
$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
});
$(outerdiv).click(function(){//再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
};
functionIsPC()
{
varsUserAgent=navigator.userAgent;
if(sUserAgent.indexOf('Android')>-1||sUserAgent.indexOf('iPhone')>-1||sUserAgent.indexOf('iPad')>-1||sUserAgent.indexOf('iPod')>-1||sUserAgent.indexOf('Symbian')>-1){
returnfalse;
}
else{
returntrue;
}
}
</script>
效果如下图所示：
原文链接：点击这里，走你
有好的建议，请在下方输入你的评论。
欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”
