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中實(shí)現(xiàn)
var box = document.getElementsByClassName('box')[0]; //創(chuàng)建一個(gè)寬高為0的盒子
var doX = 0; //創(chuàng)建一個(gè)為0的變量
var doY = 0; //創(chuàng)建一個(gè)為0的變量
var on_off = false; // 創(chuàng)建一個(gè)變量体啰，當(dāng)前賦予的值為false嗽仪；
window.onmousedown = function (e) { //寫一個(gè)點(diǎn)擊事件，當(dāng)前為鼠標(biāo)按下時(shí)沽翔；
on_off = true; //當(dāng)鼠標(biāo)點(diǎn)下時(shí)窿凤，on_off賦值為true，就把上面的賦值給替換掉了雳殊；
e = e || window.event;
doX = e.clientX; //獲取鼠標(biāo)在頁面中點(diǎn)下時(shí)的x坐標(biāo)
doY = e.clientY; //獲取鼠標(biāo)在頁面中點(diǎn)下時(shí)的y坐標(biāo)
}
window.onmousemove = function (e) { //創(chuàng)建一個(gè)鼠標(biāo)滑過事件；
if(on_off){ //當(dāng)前on_off的賦值為上面的true夯秃，所以就要執(zhí)行if判斷的true
e = e || window.event;
moX = e.clientX; //獲取鼠標(biāo)在頁面中滑過時(shí)的x坐標(biāo)
moY = e.clientY; //獲取鼠標(biāo)在頁面中滑過時(shí)的y坐標(biāo)
var box_w = Math.abs(moX - doX); //目前盒子的寬就為滑過后的位置減去點(diǎn)擊時(shí)的x的距離寝并，如果點(diǎn)擊后從右向左滑，這時(shí)候就是負(fù)距離衬潦，所以需要加一個(gè)絕對值Math.abs;
var box_h = Math.abs(moY - doY); //目前盒子的高就為滑過后的位置減去點(diǎn)擊時(shí)的x的距離镀岛；
var box_top = Math.min(moY,doY); //這是盒子定位后的top值，盒子是根據(jù)左上角去進(jìn)行定位的漂羊，這時(shí)候我點(diǎn)擊向右滑，盒子就根據(jù)點(diǎn)擊的這個(gè)坐標(biāo)去進(jìn)行定位椭豫，如果點(diǎn)擊向左滑旨指，這時(shí)候盒子的定位坐標(biāo)就需要根據(jù)滑過后的點(diǎn)去進(jìn)行定位；
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) { //創(chuàng)建一個(gè)鼠標(biāo)抬起事件粱哼；
on_off = false; //這時(shí)候就需要把滑過事件關(guān)閉了；
e = e || window.event;
box.style = 'display:none'; //最后抬起為收尾皂吮，要給盒子添加隱藏樣式；
}
