点击图片，弹出遮罩层，再用滚轮控制图片缩放。
不支持火狐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="../static/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<style>
/*************图片预览************/
#outerdiv {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
width: 100%;
height: 100%;
display: none;
}
#innerdiv {
position: absolute;
}
#bigimg {
border: 5px solid #fff;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(function() {
function zoomImg(o) {
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12; //可适合修改
if (zoom > 0) o.style.zoom = zoom + '%';
}
$(document).ready(function() {
$("img").bind("mousewheel",
function() {
zoomImg(this);
return false;
});
});
})
</script>
</head>
<body>
<center>
<img id="img" src="../static/img/111.jpg" border="1px" @click="bigimg()" />
</center>
<div id="outerdiv">
<div id="innerdiv">
<img id="bigimg" src="" onmousewheel="bigimg(this)" />
</div>
</div>
<script>
$(`#img`).click(function() {
var _this = $(this); //将当前的img元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
})
// 图片缩放
function bigimg(obj) {
// alert(parseInt(obj.style.zoom, 10));
//obj是一个对象，初始时obj并没有zoom属性，所以给zoom赋值为100；
var zoom = parseInt(obj.style.zoom, 10) || 100;
//每次滚动鼠标时，改变zoom的大小
//event.wheelDelta有两个值，120，-120，取值情况取决于滚动鼠标的方向；
zoom += event.wheelDelta / 12; //每次滚动加减10
if (zoom > 0)
obj.style.zoom = zoom + '%'; //更改后的zoom赋值给obj
return false;
}
// 预览图片
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>
</body>
</html>