简单的图片物理放大效果，直接看代码

//    图片放大镜
var $img_div = $('.formControls');
$img_div.on('click','img',function() {
	var imgsrc = $(this).attr("src");
//创建一个蒙版 蒙版里面是个img 来展示 你所点击的那张图片
	var opacityBottom = '<div id="opacityBottom" style="display: block"><img class="bigImg" src="'+ imgsrc +'" ></div>';
	$(document.body).append(opacityBottom);
	toBigImg();//变大函数
})
function toBigImg(){
//看完图片之后回到页面，避免造成文档回到顶部
	var scrollTop = document.body.scrollTop;//保存点击前滚动条的位置
	window.onscroll=function(){
	    document.body.scrollTop = scrollTop;//赋值给滚动条的位置
        }
//此处是蒙版的演示 和 放大后的img的样式 根据需求自行改动
    $("#opacityBottom").css({
        "width":"100%",  
        "height":"100%",
        "position":"fixed",
        "background":"rgba(0,0,0,0.8)",
        "z-index":"1000",
        "top":"0",
        "left":"0"
    });
    $("#opacityBottom > img").css({
	    "width":"100",
		"left":"0%",
		"top":"10%",
		"position":"fixed",
		"z-index":"10001"
    })
	$("#opacityBottom").show();
	/*隐藏*/
	$("#opacityBottom").bind("click",clickToSmallImg);
	$(".bigImg").bind("click",clickToSmallImg);                               
        $(".bigImg").css({"top":"50%","left":"50%","transform":"translate(-50%,-50%)","width":"400px"});
	function clickToSmallImg() {
    	window.onscroll=function(){
	    	document.body.scrollTop=document.body.scrollTop;//关闭后清除保存位置的值
		}
	    $("#opacityBottom").remove();
	}
    };
})

这个代码块不好使，格式有点乱 将就一下！。。嘿嘿

看完觉得不错点个赞哦！，有什么更好的，更简便的方法，下方留言！我们一起讨论