1、新建盒子
<div class="box"></div>
2、给盒子添加样式
.box{
width: 0px;
height: 0px;
background: rgb(205, 235, 255);
border: 1px double rgb(116, 116, 116);
position: absolute;
top: 0px;
left: 0px;
}
3、在js中实现
var box = document.getElementsByClassName('box')[0]; //创建一个宽高为0的盒子
var doX = 0; //创建一个为0的变量
var doY = 0; //创建一个为0的变量
var on_off = false; // 创建一个变量，当前赋予的值为false；
window.onmousedown = function (e) { //写一个点击事件，当前为鼠标按下时；
on_off = true; //当鼠标点下时，on_off赋值为true，就把上面的赋值给替换掉了；
e = e || window.event;
doX = e.clientX; //获取鼠标在页面中点下时的x坐标
doY = e.clientY; //获取鼠标在页面中点下时的y坐标
}
window.onmousemove = function (e) { //创建一个鼠标滑过事件；
if(on_off){ //当前on_off的赋值为上面的true，所以就要执行if判断的true
e = e || window.event;
moX = e.clientX; //获取鼠标在页面中滑过时的x坐标
moY = e.clientY; //获取鼠标在页面中滑过时的y坐标
var box_w = Math.abs(moX - doX); //目前盒子的宽就为滑过后的位置减去点击时的x的距离，如果点击后从右向左滑，这时候就是负距离，所以需要加一个绝对值Math.abs;
var box_h = Math.abs(moY - doY); //目前盒子的高就为滑过后的位置减去点击时的x的距离；
var box_top = Math.min(moY,doY); //这是盒子定位后的top值，盒子是根据左上角去进行定位的，这时候我点击向右滑，盒子就根据点击的这个坐标去进行定位，如果点击向左滑，这时候盒子的定位坐标就需要根据滑过后的点去进行定位；
var box_left = Math.min(moX,doX);
box.style = 'width:'+ box_w +'px; height:'+ box_h +'px; top:'+ box_top +'px; left: '+ box_left +'px;'
} //最后给盒子输出滑过之后的宽、高、top、left、
}
window.onmouseup = function (e) { //创建一个鼠标抬起事件；
on_off = false; //这时候就需要把滑过事件关闭了；
e = e || window.event;
box.style = 'display:none'; //最后抬起为收尾，要给盒子添加隐藏样式；
}
