效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
100px;
height: 100px;
background: skyblue;
position: absolute;
left: 500px;
top:200px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
var oDiv = document.getElementById("div1") ;
oDiv.onmousedown = function(ev)
{
var ev = ev || event;
var b = "";
var disX = ev.clientX ;
var disW = this.offsetWidth;
var disL = this.offsetLeft;
if(disX > this.offsetLeft + disW -10)
{
b = "right";
}
if(disX < this.offsetLeft + 10)
{
b ="left";
}
document.onmousemove = function(ev)
{
var ev = ev || event;
switch(b)
{
case 'left':
//向左扩展要考虑 鼠标点移入距离的偏移值 默认为右方向。
//同时必须改变div的left值效果才能看起来是拖动左边
oDiv.style.width = disW - (ev.clientX- disX)+ "px";
oDiv.style.left = disL +(ev.clientX- disX)+ "px";
break;
case 'right':
oDiv.style.width = disW + (ev.clientX- disX)+ "px";
break;
}
}
document.onmouseup = function()
{
document.onmousemove=document.onmouseup = null;
}
return false;
}
}
</script>
<div id="div1"></div>
</body>
</html>