pc端点击图片放大效果

1、在pc端会遇到点击图片，然后让页面添加蒙版，图片居中放大的效果；

效果图如下

2、代码实现方式：问题解决

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片放大</title><style type="text/css">body{background-color: #E8E8E8;}</style></head><body><img src="img/index-bg.jpg" class="img"/><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"  class="img"/><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><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">$("body").on('click','img',function(){  var _this = $(this);//将当前的img元素作为_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");  });  }  </script>
</html>

3、简单处理的思路就是点击图片，蒙层出现，蒙层中图片居中，居中思路万能居中；

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;

pc端点击图片放大效果相关推荐

jquery点击图片放大效果
点击图片放大效果无非就是创建一个大容器,点击小图片获取图片路径存放到大容器里. 接下来看一下效果图 HTML结构 <img class="enlargeImg" width= ...
js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
手机端点击图片放大特效-PhotoSwipe插件
PhotoSwipe插件官方网站 http://www.photoswipe.com/ PhotoSwipe插件能实现手机端点击图片全屏放大再双击图片放大等功能但有一点不太好的是图片放大后再单击不 ...
html手机端点击图片放大并根据手势缩放
手机端实现点击图片放大根据手势放大缩小效果如下进入页面背景是白色的点击图片后放大并居中背景变为黑色效果如下可以根据手势缩放演示完毕,上代码需要先引入一个js文件网盘链接: https ...
百度移动优化：关于移动端点击图片放大有多少人注意？
百度移动搜索落地页体验白皮书4.0于2018年08月15日发布有多少人注意到白皮书最下面的这短短的60字? 好多网站都存在点击图片不可放大,有多少站长注意这个细节问题? 关于加这个功能确实挺麻烦,不懂 ...
前端HTML点击图片放大效果展示
目录代码效果放大前放大后最后代码 <!DOCTYPE html> <html lang="en"><head><meta ch ...
Android 点击图片放大至全屏再次点击关闭过度动画 Shared Element效果（共享元素效果）
Android 点击图片放大至全屏再次点击关闭过度动画最近项目需要给用户一个体验优化,各种查阅,然后改了很多地方,类似于图片的点击预览,消息列表的点击流畅过渡. Shared Element效果( ...
vue项目一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
鼠标悬停出现遮罩或图片放大效果
说明:作为一个Java后端程序员,有时候也需要自己去写些前端代码,所以将工作中用到的一些小知识做记录分享. 1.鼠标悬停出现遮罩效果 * ①先看效果图: * ②再献上完整代码: <!DOCTYP ...

pc端点击图片放大效果

pc端点击图片放大效果相关推荐

最新文章

热门文章