zoukankan      html  css  js  c++  java
  • 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();
        }

    最终效果

  • 相关阅读:
    Checking Types Against the Real World in TypeScript
    nexus pip proxy config
    go.rice 强大灵活的golang 静态资源嵌入包
    几个golang 静态资源嵌入包
    rpm 子包创建学习
    Rpm Creating Subpackages
    ava 类似jest snapshot 功能试用
    ava js 测试框架基本试用
    The Architectural Principles Behind Vrbo’s GraphQL Implementation
    graphql-compose graphql schema 生成工具集
  • 原文地址:https://www.cnblogs.com/dpwow/p/7813701.html
Copyright © 2011-2022 走看看