基於jquery實現滾輪放大縮小圖片的函數代碼

Posted on by

以下是一份基本的jquery實現滾輪放大縮小圖片的函數代碼

（1）滾輪控制放大縮小圖片效果如圖：

實現代碼如下：

<!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）點擊圖片，彈出遮罩層，再用滾輪控制圖片縮放，該場景一般用於聊天對話框。

實現代碼如下：

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

其他網友補充的函數

$(document).ready(function() {
  function zoomImage(event) {
    event.preventDefault();
    var image = $(this).find('img');
    var delta = event.originalEvent.deltaY || event.originalEvent.detail || event.originalEvent.wheelDelta;
    var zoom = delta > 0 ? -0.2 : 0.2;
    var newWidth = image.width() + (image.width() * zoom);
    var newHeight = image.height() + (image.height() * zoom);
    image.width(newWidth).height(newHeight);
  }
  $('div.image-container').on('mousewheel DOMMouseScroll', zoomImage);
});

在這個代碼中，我們首先為每個包含圖片的`div`元素附加瞭一個滾輪事件監聽器，當用戶在這些元素上滾動滾輪時，會調用`zoomImage`函數進行放大/縮小操作。
在`zoomImage`函數內部，我們首先通過`$(this).find('img')`選擇器找到瞭當前元素內的`img`元素，接下來從滾輪事件中獲取瞭用戶的滾動方向，然後計算出當前圖片的放大/縮小後的寬度和高度，並將其重新賦值給瞭圖片元素。
值得註意的是，在這個代碼中我們同時監聽瞭`mousewheel`和`DOMMouseScroll`這兩種不同瀏覽器的滾輪事件，以保證代碼能夠在不同的瀏覽器中正常運行。

推薦閱讀：