Jquery缩放

Posted 2020-09-23 失落的黎明

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery缩放相关的知识，希望对你有一定的参考价值。

$(document).mousemove(function(e) {

if (!!this.move) {

var posix = !document.move_target ? {‘x‘: 0, ‘y‘: 0} : document.move_target.posix,

callback = document.call_down || function() {

$(this.move_target).css({

‘top‘: e.pageY - posix.y,

‘left‘: e.pageX - posix.x

});

};

callback.call(this, e, posix);

}

}).mouseup(function(e) {

if (!!this.move) {

var callback = document.call_up || function(){};

callback.call(this, e);

$.extend(this, {

‘move‘: false,

‘move_target‘: null,

‘call_down‘: false,

‘call_up‘: false

});

}

});

原理稍后分析，先来看看效果：

title="" width="800" height="219" border="0" hspace="0" vspace="0" style="width: 800px; height: 219px;"/>

将代码剥离，只要写5行就可以实现拖拽了，是不是很简单：

$(‘#box‘).mousedown(function(e) {
    var offset = $(this).offset();
      
    this.posix = {‘x‘: e.pageX - offset.left, ‘y‘: e.pageY - offset.top};
    $.extend(document, {‘move‘: true, ‘move_target‘: this});
});

将代码剥离，原先的代码保留不变，增加一个绑定事件：

var $box = $(‘#box‘).mousedown(function(e) {
    var offset = $(this).offset();
      
    this.posix = {‘x‘: e.pageX - offset.left, ‘y‘: e.pageY - offset.top};
    $.extend(document, {‘move‘: true, ‘move_target‘: this});
}).on(‘mousedown‘, ‘#coor‘, function(e) {
    var posix = {
            ‘w‘: $box.width(), 
            ‘h‘: $box.height(), 
            ‘x‘: e.pageX, 
            ‘y‘: e.pageY
        };
      
    $.extend(document, {‘move‘: true, ‘call_down‘: function(e) {
        $box.css({
            ‘width‘: Math.max(30, e.pageX - posix.x + posix.w),
            ‘height‘: Math.max(30, e.pageY - posix.y + posix.h)
        });
    }});
    return false;
});