js实现点击图片在屏幕中间弹出放大效果

射流研究…实现点击图片在屏幕中间弹出放大效果

效果图

点击图片后

关键代码

超文本标记语言

div img高度=' 100 '宽度=' 100 ' src=' http :3359 cdn。pix abay。com/photo/2018/08/14/13/23/ocean-3605547 _ 960 _ 720。jpg ' class=' pic '/img height=' 100 ' width=' 100 ' src=' http 33603359 cdn。pix abay。comtop :0 left 33600 background : rgba(0，0，0，0.7)；z索引：2;宽度：100%;高度：100%;display : none ' div id=' inner div ' style=' position : absolute；img id=' big img ' style=' border :5 px solid # fff；src=' http : '/div js

脚本src='http:/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(function(){ $(')' .pic ').单击(function(){ var _ this=$(this)；//将当前的图片元素作为_这个传入函数imgShow('#outerdiv '，' #innerdiv '，' #bigimg '，_ this)；});});函数imgShow(outerdiv，innerdiv，bigimg，_ this){ var src=_ this。attr(' src ')；//获取当前点击的图片元素中的科学研究委员会属性$(bigimg).attr('src '，src)；//设置#bigimg元素的科学研究委员会属性/*获取当前点击图片的真实大小，并显示弹出层及大图*/$('img/').attr('src '，src).load(function(){ var window w=$(window)).宽度();//获取当前窗口宽度var windowH=$(window).高度();//获取当前窗口高度var real width=this.width//获取图片真实宽度var real height=this.height//获取图片真实高度var imgWidth，imgHeightvar标度=0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放if(realHeightwindowH*scale) {//判断图片高度imgHeight=windowH *比例尺；//如大于窗口高度，图片高度进行缩放imgWidth=imgHeight/真实高度*真实宽度；//等比例缩放宽度if(imgWidthwindowW*scale) {//如宽度扔大于窗口宽度imgWidth=windowW *比例尺；//再对宽度进行缩放} } else if(realWidthwindowW * scale){//如图片高度合适，判断图片宽度imgWidth=windowW *比例尺；//如大于窗口宽度，图片宽度进行缩放imgHeight=img