jQuery实现spliter效果
时间: 2023-07-28 11:10:11 浏览: 53
可以通过以下代码实现jQuery的spliter效果:
HTML代码:
```html
<div class="splitter-container">
<div class="left-pane"></div>
<div class="splitter"></div>
<div class="right-pane"></div>
</div>
```
CSS代码:
```css
.splitter-container {
position: relative;
height: 200px;
}
.left-pane {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50%;
background-color: #f5f5f5;
}
.splitter {
position: absolute;
top: 0;
left: 50%;
bottom: 0;
width: 10px;
background-color: #ddd;
cursor: col-resize;
}
.right-pane {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 60%;
background-color: #f5f5f5;
}
```
JavaScript代码:
```javascript
$(function() {
var splitter = $(".splitter");
var leftPane = $(".left-pane");
var rightPane = $(".right-pane");
var container = $(".splitter-container");
splitter.mousedown(function(e) {
e.preventDefault();
$(document).mousemove(function(e) {
var x = e.pageX - container.offset().left;
var containerWidth = container.width();
var leftPaneWidth = x / containerWidth * 100;
var rightPaneWidth = (containerWidth - x) / containerWidth * 100;
leftPane.css("width", leftPaneWidth + "%");
rightPane.css("width", rightPaneWidth + "%");
});
});
$(document).mouseup(function(e) {
$(document).unbind("mousemove");
});
});
```
这段代码实现了一个具有拖动功能的spliter,可以通过鼠标拖动spliter来改变左右两个面板的宽度。