1. 程式人生 > >jQurey實現html浮動視窗的移動 拉伸效果

jQurey實現html浮動視窗的移動 拉伸效果

如果有需要的使用者 ,可以直接拿去用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>main view</title>
    <style type="text/css">
 .box { width: 200px;
        height: 100px; 
        cursor: move;
        position: absolute;
        top: 30px;
        left: 30px; 
        background-color: #FFF; 
        border: 1px solid #CCCCCC;  
        -webkit-box-shadow: 10px 10px 25px #ccc;
        -moz-box-shadow: 10px 10px 25px #ccc;
         box-shadow: 10px 10px 25px #ccc;}
         
         
         
    .coor { width: 10px;
            height: 10px; 
            overflow: hidden; 
            cursor: se-resize;
            position: absolute;
            right: 0;
            bottom: 0; 
             background-color: #09C; }
         
     body { background-color: #F3F3F3; }
         
        </style>
        
    <script src="./jQuery/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <script type="text/javascript" language="javascript">
    //move
     $(function() {
	$(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
			});
		}
	});
 
	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 fBox = $(this).parent();
		
	    var posix = {
	            'w': fBox.width(), 
	            'h': fBox.height(), 
	            'x': e.pageX, 
	            'y': e.pageY
	        };
	    
	    $.extend(document, {'move': true, 'call_down': function(e) {
	    	fBox.css({
	            'width': Math.max(30, e.pageX - posix.x + posix.w),
	            'height': Math.max(30, e.pageY - posix.y + posix.h)
	        });
	    }});
	    return false;
	});
});

      </script>
      </head>
      <body>
        <div class="box">
 
            <div class="coor"></div>
         
        </div>
        
      </body>
      </html>