테두리 위로 가져 가면 div를 당기거나 늘리시겠습니까? <a href="http://g.recordit.co/awq1zK2Eei.gif" rel="nofollow noreferrer">http://g.recordit.co/awq1zK2Eei.gif</a></p> <p>다음은 서로 경계 두 개의 div가 있으며, 단순히 국경을 유혹하는 종류의 비트에 대한 한 방향으로 끌어 :

Question

나는 이런 일을하는 방법 궁금합니다. 위의 gif에서 아무 것도 클릭하지 않고 div의 종류가 커서 방향으로 늘어납니다.

당신은 https://waaark.com/

Answer 1

내가 이걸 발견에서 스스로를 보라 그것은 당신에게

/** 
 
* Vars 
 
*/ 
 
var points = []; 
 
var rafID = null; 
 

 
var guiVars = function() { 
 
    this.totalPoints = 6; 
 
    this.viscosity = 20; 
 
    this.mouseDist = 80; 
 
    this.damping = 0.15; 
 
    this.showIndicators = false; 
 
    this.leftColor = '#a8d0e6'; 
 
    this.rightColor = '#f76c6c'; 
 
} 
 
var vars = new guiVars(); 
 

 
window.onload = function() { 
 
    var gui = new dat.GUI(); 
 
    gui.add(vars, 'showIndicators'); 
 
    var controller = gui.add(vars, 'totalPoints', 2, 20).step(1); 
 
    gui.add(vars, 'viscosity', 10, 500); 
 
    gui.add(vars, 'mouseDist', 20, 400); 
 
    gui.add(vars, 'damping', 0.01, 0.5); 
 
    gui.addColor(vars, 'leftColor'); 
 
    gui.addColor(vars, 'rightColor'); 
 

 
    controller.onChange(function() { 
 
    cancelAnimationFrame(rafID); 
 
    initCanvas(); 
 
    }); 
 
}; 
 

 
/** 
 
* Mouse handler 
 
*/ 
 
var mouseX = 0, 
 
    mouseY = 0, 
 
    mouseLastX = 0, 
 
    mouseLastY = 0, 
 
    mouseDirectionX = 0, 
 
    mouseDirectionY = 0, 
 
    mouseSpeedX = 0, 
 
    mouseSpeedY = 0; 
 

 
// Get mouse direction 
 
function mouseDirection(e) { 
 
    if (mouseX < e.pageX) 
 
    mouseDirectionX = 1; 
 
    else if (mouseX > e.pageX) 
 
    mouseDirectionX = -1; 
 
    else 
 
    mouseDirectionX = 0; 
 

 
    if (mouseY < e.pageY) 
 
    mouseDirectionY = 1; 
 
    else if (mouseY > e.pageY) 
 
    mouseDirectionY = -1; 
 
    else 
 
    mouseDirectionY = 0; 
 

 
    mouseX = e.pageX; 
 
    mouseY = e.pageY; 
 
} 
 
$(document).on('mousemove', mouseDirection); 
 

 
// Get mouse speed 
 
function mouseSpeed() { 
 
    mouseSpeedX = mouseX - mouseLastX; 
 
    mouseSpeedY = mouseY - mouseLastY; 
 

 
    mouseLastX = mouseX; 
 
    mouseLastY = mouseY; 
 

 
    setTimeout(mouseSpeed, 50); 
 
} 
 
mouseSpeed(); 
 

 
/** 
 
* Point 
 
*/ 
 
function Point(x, y, canvas) { 
 
    this.x = x; 
 
    this.ix = x; 
 
    this.vx = 0; 
 
    this.cx = 0; 
 
    this.y = y; 
 
    this.iy = y; 
 
    this.cy = 0; 
 
    this.canvas = canvas; 
 
} 
 

 
Point.prototype.move = function() { 
 
    this.vx += (this.ix - this.x)/vars.viscosity; 
 

 
    var dx = this.ix - mouseX, 
 
    dy = this.y - mouseY; 
 

 
    var gap = this.canvas.data('gap'); 
 

 
    // Move point only when leaving color block 
 
    if ((mouseDirectionX > 0 && mouseX > this.x) || (mouseDirectionX < 0 && mouseX < this.x)) { 
 
    if (Math.sqrt(dx * dx) < vars.mouseDist && Math.sqrt(dy * dy) < gap) { 
 
     this.vx = mouseSpeedX/8 
 
    } 
 
    } 
 

 
    this.vx *= (1 - vars.damping); 
 
    this.x += this.vx; 
 
}; 
 

 
/** 
 
* Init canvas 
 
*/ 
 
function initCanvas() { 
 
    var canvas = $('canvas'); 
 
    var context = canvas.get(0).getContext('2d'); 
 

 
    cancelAnimationFrame(rafID); 
 

 
    // Resize canvas 
 
    $('canvas').get(0).width = $(window).width(); 
 
    $('canvas').get(0).height = $(window).height(); 
 

 
    // Add points 
 
    points = []; 
 
    var gap = (canvas.height())/(vars.totalPoints - 1); 
 
    var pointX = $(window).width()/2; 
 

 
    for (var i = 0; i <= vars.totalPoints - 1; i++) 
 
    points.push(new Point(pointX, i * gap, canvas)); 
 

 
    // Start render 
 
    renderCanvas(); 
 

 
    canvas.data('gap', gap); 
 
} 
 

 
/** 
 
* Render canvas 
 
*/ 
 
function renderCanvas() { 
 
    var canvas = $('canvas'); 
 
    var context = canvas.get(0).getContext('2d'); 
 

 
    // rAF 
 
    rafID = requestAnimationFrame(renderCanvas); 
 

 
    // Clear scene 
 
    context.clearRect(0, 0, canvas.width(), canvas.height()); 
 
    context.fillStyle = vars.leftColor; 
 
    context.fillRect(0, 0, canvas.width(), canvas.height()); 
 

 
    // Move points 
 
    for (var i = 0; i <= vars.totalPoints - 1; i++) 
 
    points[i].move(); 
 

 
    // Draw shape 
 
    context.fillStyle = vars.rightColor; 
 
    context.strokeStyle = vars.rightColor; 
 
    context.lineWidth = 1; 
 
    context.beginPath(); 
 

 
    context.moveTo($(window).width()/2, 0); 
 

 
    for (var i = 0; i <= vars.totalPoints - 1; i++) { 
 
    var p = points[i]; 
 

 
    if (points[i + 1] != undefined) { 
 
     p.cx = (p.x + points[i + 1].x)/2 - 0.0001; // - 0.0001 hack to fix a 1px offset bug on Chrome... 
 
     p.cy = (p.y + points[i + 1].y)/2; 
 
    } else { 
 
     p.cx = p.ix; 
 
     p.cy = p.iy; 
 
    } 
 
    
 
    context.bezierCurveTo(p.x, p.y, p.cx, p.cy, p.cx, p.cy); 
 
    } 
 

 
    context.lineTo($(window).width(), $(window).height()); 
 
    context.lineTo($(window).width(), 0); 
 
    context.closePath(); 
 
    context.fill(); 
 

 
    if (vars.showIndicators) { 
 
    // Draw points 
 
    context.fillStyle = '#000'; 
 
    context.beginPath(); 
 
    for (var i = 0; i <= vars.totalPoints - 1; i++) { 
 
     var p = points[i]; 
 

 
     context.rect(p.x - 2, p.y - 2, 4, 4); 
 
    } 
 
    context.fill(); 
 

 
    // Draw controls 
 
    context.fillStyle = '#fff'; 
 
    context.beginPath(); 
 
    for (var i = 0; i <= vars.totalPoints - 1; i++) { 
 
     var p = points[i]; 
 

 
     context.rect(p.cx - 1, p.cy - 1, 2, 2); 
 
    } 
 
    context.fill(); 
 
    } 
 
} 
 

 
/** 
 
* Resize handler 
 
*/ 
 
function resizeHandler() { 
 
    initCanvas(); 
 
} 
 
$(window).on('resize', resizeHandler).trigger('resize');

body { 
 
    overflow: hidden; 
 
} 
 
canvas { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas></canvas>

도움이되기를 바랍니다 수

나도 그들이 어떻게 사용하는지 알고 싶어요