垂直或水平调整div的大小 [英] Resize div vertical or horizontal
本文介绍了垂直或水平调整div的大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何不使用css属性调整div垂直或水平大小,而只是使用纯JavaScript代码从高度或宽度调整大小?
How to resize div vertical or horizontal not using css property just resize from height or width using pure javascript code?
推荐答案
HTML
<div id="container">
<div id="top-panel"> This is the top side's content! </div>
<div id="bottom-panel">
<div id="drag"></div>
bottom content!</div>
JAVASCRIPT
JAVASCRIPT
var isResizing = false,
lastDownX = 0;
$(function () {
var container = $('#container'),
top = $('#top-panel'),
bottom = $('#bottom-panel'),
handle = $('#drag');
document.addEventListener("mousedown", function(e){
isResizing = true;
lastDownX = e.clientY;
});
document.addEventListener("mousemove", function(e){
// we don't want to do anything if we aren't resizing.
if (!isResizing)
return;
console.log("e.clientY ", e.clientY, container.offset().top)
var offsetRight = container.height() - (e.clientY - container.offset().top);
top.css('bottom', offsetRight);
bottom.css('height', offsetRight);
}); document.addEventListener("mouseup", function(e){
// stop resizing
isResizing = false;
});
});
直接调整div大小
这篇关于垂直或水平调整div的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文