（1）滚轮控制放大缩小图片效果如图：

jquery设置图片大小 基于jquery的图片放大缩小_jquery设置图片大小

实现代码如下：

<!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>
    <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 src="../static/img/111.jpg" border="1px" />
    </center>
</body>

</html>

（2）点击图片，弹出遮罩层，再用滚轮控制图片缩放，该场景一般用于聊天对话框。

jquery设置图片大小 基于jquery的图片放大缩小_缩放_02

实现代码如下：

<!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>