如何用jquery动态的拉伸DIV使其改变宽度(急)

比如这是一个网页,占满全屏,我现在要按住中间这个分界线拖动,使其左右两个div随着我左右拖动而改变宽度,这怎么写,最后又代码示意,万分感谢。。... 比如这是一个网页,占满全屏,我现在要按住中间这个分界线拖动,使其左右两个div随着我左右拖动而改变宽度,这怎么写,最后又代码示意,万分感谢。。 展开
 我来答
yugi111
2015-07-27 · TA获得超过8.1万个赞
知道大有可为答主
回答量:5.1万
采纳率:70%
帮助的人:1.3亿
展开全部
<!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;
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式