jQuery插件开发——元素拖拽和基于鼠标位置为中心缩放

　　由于项目中需要用到对元素的拖拽和缩放的实现，在网上找了一些开源的组件，感觉都比较笨重，因此决定自己写个简单的，巩固下jquery组件开发 , dragZoom

html5页面

<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    <!--jquery 鼠标滚动组件-->
    <script type="text/javascript" src="jquery.mousewheel.min.js"></script>
    <!-- 拖拽和缩放 -->
    <script type="text/javascript" src="dragZoom.js"></script>
    <title></title>

</head>

<body style="margin:0;padding:0;">
    <div id="box" style=" 800px;height: 500px;margin:50px auto;border:1px solid red; background: #fff;position:relative;overflow:hidden;">
        <img src="1.jpg" style="background-color: Gray;position:absolute;200px;height:100px;top:100px;left:200px;" id="pan" />
    </div>
</body>

</html>

jQuery组件

组件的结构

;
(function(jQuery, window, document, undfined) {

    var DragZoom = function(ele, opt) {}
    DragZoom.prototype = {}
    jQuery.fn.dragZoom = function(options) {
        
    }

})($, window, document, undefined);

插件参数

 var DragZoom = function(ele, opt) {
        this.$element = ele;
        this.defaults = {
            minzoom: 1,
            maxzoom: 5,
            zoom: 1,
            speed: 0.1,
            scope: null,
            onWheelStart: null,
            onWheelEnd: null,
            onDragStart: null,
            onDragMove: null,
            onDragEnd: null
        };

        this.options = $.extend({}, this.defaults, opt);
    }

插件方法

DragZoom.prototype = {
        Init: function() {
            var self = this;
            //参数
            self.x = this.$element.offset().left;
            self.y = this.$element.offset().top;
            self.width = this.$element.width();
            self.height = this.$element.height();
            self.scale = 1;
            self.relX = 0;
            self.relY = 0;
            self.isMoved = false;

            //缩放
            self.$element.on('mouseout', function(e) {
                $("body").css('cursor', 'default');
                return false;
            }).on('mousewheel', function(e, delta) {
                var size = delta * self.options.speed;
                self.options.zoom = (self.options.zoom * 10 + delta) / 10;
                self.wheel(e, self);
                return false;
            }).on('mousedown', function(e) {
                $("body").css("cursor", "move")
                self.start(e, self);
                return false;
            }).on('mouseup', function(e) {
                $("body").css('cursor', 'default');
            });

            //拖拽
            $(document).on('mousemove', function(e) {
                // if (self.options.zoom > 1) {
                //     self.move(e, self);
                // }
                self.move(e, self);
                return false;
            }).on('mouseup', function(e) {
                self.end(e, self);
                return false;
            });
            return self.$element;
        },
        wheel: function(ev, self) {

            if (self.options.zoom >= self.options.minzoom && self.options.zoom <= self.options.maxzoom) {
                //缩放开始回调
                self.options.onWheelStart && typeof self.options.onWheelStart == 'function' ? self.options.onWheelStart() : null;

                var cursor_x = ev.pageX,
                    cursor_y = ev.pageY;

                var eleOffset = self.$element.offset();
                self.x = eleOffset.left;
                self.y = eleOffset.top;

                self.x = self.x - (cursor_x - self.x) * (self.options.zoom - self.scale) / self.scale;
                self.y = self.y - (cursor_y - self.y) * (self.options.zoom - self.scale) / self.scale;

                self.scale = self.options.zoom;

                self.$element.width(self.width * self.scale).height(self.height * self.scale);
                self.$element.offset({
                    top: self.y,
                    left: self.x
                });

                //缩放结束回调
                self.options.onWheelEnd && typeof self.options.onWheelEnd == 'function' ? self.options.onWheelEnd() : null;
            }
            self.options.zoom = self.options.zoom < self.options.minzoom ? self.options.minzoom :
                (self.options.zoom > self.options.maxzoom ? self.options.maxzoom : self.options.zoom);
        },
        start: function(ev, self) {
            self.isMoved = true;
            var selfOffset = self.$element.offset();
            self.relX = ev.clientX - selfOffset.left;
            self.relY = ev.clientY - selfOffset.top;

            //拖拽开始回调
            self.options.onDragStart ? self.options.onDragStart() : null;

        },
        move: function(ev, self) {

            if (self.isMoved) {
                self.y = ev.clientY - self.relY;
                self.x = ev.clientX - self.relX;

                self.$element.offset({
                    top: self.y,
                    left: self.x
                });


                //拖拽移动回调
                self.options.onDragMove && typeof self.options.onDragMove == 'function' ? self.options.onDragMove() : null;

            }
        },
        end: function(ev, self) {
            self.isMoved = false;
            // $(document).off('mousemove').off('mouseup');

            //拖拽结束回调
            self.options.onDragEnd && typeof self.options.onDragEnd == 'function' ? self.options.onDragEnd() : null;
        }
    };

调用

   jQuery.fn.dragZoom = function(options) {
        dragzoom = new DragZoom(this, options);
        return dragzoom.Init();
    }

最终效果

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/dpwow/p/7813701.html