可调整DIV分栏宽度的JavaScript代码
5星
- 浏览量: 0
- 大小:None
- 文件类型：None
简介：
本段JavaScript代码提供了一种灵活的方法来动态调整网页中DIV元素的宽度，适用于响应式布局设计，增强用户体验。
DIV分栏宽度可以左右拖动变化的JavaScript代码如下：
```javascript
// 初始化可拖动区域
function initDraggableDivs() {
var resizeHandle = document.querySelectorAll(.resize-handle);
for (var i = 0; i < resizeHandle.length; i++) {
resizeHandle[i].addEventListener(mousedown, function(e) {
e.preventDefault();
var startXPos = e.clientX;
var startWidth = this.parentNode.offsetWidth;
// 开始拖动
document.addEventListener(mousemove, dragDiv);
document.addEventListener(mouseup, stopDrag);
function dragDiv(e) {
var diffX = (e.clientX - startXPos);
if ((startWidth + diffX) > 40 && (startWidth + diffX) < window.innerWidth-120)
this.parentNode.style.width = startWidth + diffX + px;
}
function stopDrag() {
document.removeEventListener(mousemove, dragDiv);
document.removeEventListener(mouseup, stopDrag);
}
});
}
}
// 页面加载完成后执行
window.onload = initDraggableDivs;
```
这段代码实现了在网页中通过鼠标拖动调整`DIV`分栏宽度的功能。注意，为了使此脚本生效，请确保HTML结构中有相应的`.resize-handle`类元素，并且这些元素位于需要被调整大小的`div`内部或旁边。
全部评论 (0)
