如何用jquery动态的拉伸DIV使其改变宽度（急）
比如这是一个网页，占满全屏，我现在要按住中间这个分界线拖动，使其左右两个div随着我左右拖动而改变宽度，这怎么写，最后又代码示意，万分感谢。。...
比如这是一个网页，占满全屏，我现在要按住中间这个分界线拖动，使其左右两个div随着我左右拖动而改变宽度，这怎么写，最后又代码示意，万分感谢。。
展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<title>
RunJS 演示代码
</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: absolute;
float: left;
height: 500px;
}
div.left {
background-color: red;
width: 200px;
left:0px;
}
div.center {
background-color: yellow;
width: 200px;
right:205px;
float:right;
}
div.handler {
width: 5px;
cursor: col-resize;
background-color: blue;
z-index:1;
left: 200px;
}
</style>
<script>
jQuery(function ($){
var doc = $(document), dl = $("div.left"), dc = $("div.center");
var sum = dl.width() + dc.width() +
$("div.handler").mousedown (function (e) {
var me = $(this);
var deltaX = e.clientX
-
(parseFloat(me.css("left")) || parseFloat(me.prop("clientLeft")));
doc.mousemove(function (e){
var lt = e.clientX - deltaX;
lt = lt < 0 ? 0 : lt;
lt = lt > sum - me.width() ? sum - me.width() : lt;
me.css ("left", lt + "px");
dl.width(lt);
dc.width(sum-lt-me.width());
});
}).width();
doc.mouseup (function(){
doc.unbind("mousemove");
});
doc[0].ondragstart
= doc[0].onselectstart
= function ()
{
return false;
};
});
</script>
</head>
<body>
<div class="left">
同时在线人数：1000
点击刷新
</div>
<div class="handler">
</div>
<div class="center">
sss
</div>
</body>
</html>
更多追问追答
追问
万分感谢啊。。那现在比如说我要限定左边的宽度最小为200像素，JS咋改- -，加一个min-width好像不行
追答
lt = lt < 200 ? 200 : lt;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
