JS-以鼠标位置为中心的滑轮缩放-图片

完整代码

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>以鼠标位置为中心的滑轮放大功能demo</title>
    <style type="text/css">
        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        body {
            margin: 0;
            padding: 0;
        }

        #oImg {
            position: absolute;
            left: 50px;
            top: 50px;
            z-index: 1;
        }
    </style>
    <script type="text/javascript">

        /*绑定事件*/
        function addEvent(obj, sType, fn) {
            if (obj.addEventListener) {
                obj.addEventListener(sType, fn, false);
            } else {
                obj.attachEvent('on' + sType, fn);
            }
        };
        function removeEvent(obj, sType, fn) {
            if (obj.removeEventListener) {
                obj.removeEventListener(sType, fn, false);
            } else {
                obj.detachEvent('on' + sType, fn);
            }
        };
        function prEvent(ev) {
            let oEvent = ev || window.event;
            if (oEvent.preventDefault) {
                oEvent.preventDefault();
            }
            return oEvent;
        }
        /*添加滑轮事件*/
        function addWheelEvent(obj, callback) {
            if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
                addEvent(obj, 'DOMMouseScroll', wheel);
            } else {
                addEvent(obj, 'mousewheel', wheel);
            }
            function wheel(ev) {
                let oEvent = prEvent(ev),
                    delta = oEvent.detail ? oEvent.detail > 0 : oEvent.wheelDelta < 0;
                callback && callback.call(oEvent, delta);
                return false;
            }
        };


        function mousewheelDragZoom(oImg) {
            /*拖拽功能*/
            addEvent(oImg, 'mousedown', function (ev) {
                let oEvent = prEvent(ev),
                    oParent = oImg.parentNode,
                    disX = oEvent.clientX - oImg.offsetLeft,
                    disY = oEvent.clientY - oImg.offsetTop,
                    startMove = function (ev) {
                        if (oParent.setCapture) {
                            oParent.setCapture();
                        }
                        let oEvent = ev || window.event,
                            L = oEvent.clientX - disX,
                            T = oEvent.clientY - disY;
                        oImg.style.left = L + 'px';
                        oImg.style.top = T + 'px';
                        oParent.onselectstart = function () {
                            return false;
                        }
                    }, endMove = function (ev) {
                        if (oParent.releaseCapture) {
                            oParent.releaseCapture();
                        }
                        oParent.onselectstart = null;
                        removeEvent(oParent, 'mousemove', startMove);
                        removeEvent(oParent, 'mouseup', endMove);
                    };
                addEvent(oParent, 'mousemove', startMove);
                addEvent(oParent, 'mouseup', endMove);
                return false;
            });

            /*以鼠标位置为中心的滑轮放大功能*/
            addWheelEvent(oImg, function (delta) {
                let ratioL = (this.clientX - oImg.offsetLeft) / oImg.offsetWidth,
                    ratioT = (this.clientY - oImg.offsetTop) / oImg.offsetHeight,
                    ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
                    w = parseInt(oImg.offsetWidth * ratioDelta),
                    h = parseInt(oImg.offsetHeight * ratioDelta),
                    l = Math.round(this.clientX - (w * ratioL)),
                    t = Math.round(this.clientY - (h * ratioT));
                with (oImg.style) {
                    width = w + 'px';
                    height = h + 'px';
                    left = l + 'px';
                    top = t + 'px';
                }
            });
        }
        /*页面载入后*/
        window.onload = function () {
            let oImg = document.getElementById('oImg');
            mousewheelDragZoom(oImg)
        };
    </script>
</head>

<body>
    <div id="oImg">
        <img src="http://note.zhenglinglu.cn/assets/logo.be692c4d.png" />
    </div>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

#JavaScript

上次更新: 2024/02/20, 17:31:36

← js_登录验证码绘制 js生成目录并实现目录节点跟随滚动高亮→