由于项目中需要用到对元素的拖拽和缩放的实现，在网上找了一些开源的组件，感觉都比较笨重，因此决定自己写个简单的，巩固下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(); }
最终效果
