如何在不使用 css 属性的情况下调整 div 垂直或水平大小,仅使用纯 javascript 代码从高度或宽度调整大小?
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>
脚本语言
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 大小 http://jsfiddle.net/T4St6/2156/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)