jQuery是一個(gè)非常流行的JavaScript庫，它提供了很多方便的方法和函數(shù)來操作和處理HTML元素。其中，可以使用jQuery實(shí)現(xiàn)一個(gè)左右拉伸的div效果，讓頁面變得更加美觀和用戶友好。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
#container {
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid #ccc;
overflow: hidden;
}
#left {
width: 200px;
height: 300px;
background-color: #f2f2f2;
float: left;
}
#right {
width: 300px;
height: 300px;
background-color: #f5f5f5;
float: left;
}
#handle {
width: 5px;
height: 300px;
background-color: #000;
cursor: col-resize;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="handle"></div>
<div id="right"></div>
</div>
<script>
$(function() {
var container = $("#container");
var left = $("#left");
var handle = $("#handle");
var right = $("#right");
var dragging = false;
handle.mousedown(function(e) {
dragging = true;
});
$(document).mouseup(function(e) {
dragging = false;
});
container.mousemove(function(e) {
if (dragging) {
var x = e.pageX - container.offset().left;
if (x >200 && x< 400) {
left.css("width", x + "px");
handle.css("left", x + "px");
right.css("left", x + "px");
right.css("width", container.width()-x-5 + "px");
}
}
});
});
</script>
</body>
</html>以上代碼實(shí)現(xiàn)了一個(gè)寬度為500px、高度為300px的容器，容器中左邊200px是一個(gè)灰色的div，右邊300px是一個(gè)淺灰色的div，中間有一個(gè)黑色的5px寬度的豎直條，用來作為左右div的分界線。
當(dāng)鼠標(biāo)點(diǎn)擊并且拖動(dòng)黑色豎直條時(shí)，左邊灰色div的寬度會(huì)跟隨鼠標(biāo)移動(dòng)而變化，而右邊的淺灰色div也會(huì)跟隨變化。通過使用jQuery的鼠標(biāo)事件和CSS樣式屬性，我們可以方便地實(shí)現(xiàn)這個(gè)左右拉伸的div效果。