2019独角兽企业重金招聘Python工程师标准>>> 
<!DOCTYPE>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="useJs/1.8.2/jquery-1.8.2.min.js" ></script>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#box{
width:610px;
height:300px;
margin:30px auto;
position:relative;
background:red;
}
#left{
width:300px;
height:300px;
margin-right:10px;
background:#630;
float:left;
}
#right{
width:300px;
height:300px;
background:pink ;
float:right;
}
#drag{
width:8px;
height:298px;
border:1px solid black;
cursor:e-resize;
position:absolute;
top:0;
left:300px;
}
</style>
<script>
$(function(){
var $box=$("#box"),$left=$("#left"),$right=$("#right"),$drag=$("#drag"),
$boxWidth=$box.width(),
start=Math.ceil(($(window).width()-$boxWidth)/2) ,
end=start+$boxWidth-10;
$drag.on({
mousedown:function(e){
$(document).mouseup(function(){$(document).unbind()})
$(document).mousemove(function(e){
var liftSize=(e.pageX)-start
if(liftSize<=0){
$drag.css("left",0);
$left.width(0);
$right.width(600)
return false
}
else if(liftSize>=$boxWidth-10){
$drag.css("left",600);
$left.width(600);
$right.width(0)
return false
}
$left.width(liftSize);
$right.width($box.width()-liftSize-10)
$drag.css("left",liftSize);
})
}
})
})
</script>
<title>无标题文档</title>
</head>
<body>
<div id="box">
<div id="drag">
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
</html>