Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
​
  <div class="main">
    <div class="div_left">
      例
一些不同的光标：
​
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}
亲自试一试
浏览器支持
IE  Firefox Chrome  Safari  Opera
所有主流浏览器都支持 cursor 属性。
​
​
    </div>
    <div class="div_right">
          例
一些不同的光标：
​
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}
亲自试一试
浏览器支持
IE  Firefox Chrome  Safari  Opera
所有主流浏览器都支持 cursor 属性。
    </div>
    <div class="border">
      <div class="line"></div>
    </div>
  </div>
</body>
</html>
 
.main{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:#9ff;
}
.div_left{
  padding:5px;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:50%;
  background-color:#99f;
}
.div_right{
  padding:5px;
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  right:0;
  background-color:#f9f;
}
.border{
  padding:0 10px;
  z-index:100;
  position:absolute;
  top:0;
  bottom:0;
  left:calc(50% - 12px);
  cursor:w-resize       ;
}
.line{
  display:block;
  position:relative;
  width:4px;
  height:100%;
  box-shadow:0 0 7px 0 rgba(30,30,30,0.1);
  background-color:#ff9;
}
 
let flag = 0;
let iX;
let BR;
let dw;
$(".border").mousedown(function(e){
  iX = e.clientX - this.offsetLeft;
  BR = e.clientX - $(".div_left").outerWidth();
  //左div的宽度，也就是right到left的值
  dw = $(".main").outerWidth(); //外div的宽度
  flag = 1;
  return false;
})
$("body").mouseup((e)=>{
  flag = 0;
})
$("body").mousemove(function(e){
  if(flag){
    let f=  $(".div_left").width();
    $(".border").css("left",e.clientX-iX+"px")
    $(".div_left").css("right",dw-(e.clientX-BR)+"px")
    //根据鼠标事件相对位置计算出div的position
    $(".div_right").css("left",(e.clientX-BR)+"px")
    return false;
  }
})
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mscststspro
0viewers