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) {  //寫(xiě)一個(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)在頁(yè)面中點(diǎn)下時(shí)的x坐標(biāo)
    doY = e.clientY;   //獲取鼠標(biāo)在頁(yè)面中點(diǎn)下時(shí)的y坐標(biāo)
}

window.onmousemove = function (e) {  //創(chuàng)建一個(gè)鼠標(biāo)滑過(guò)事件；
    if(on_off){  //當(dāng)前on_off的賦值為上面的true，所以就要執(zhí)行if判斷的true
    e = e || window.event;
    moX = e.clientX;  //獲取鼠標(biāo)在頁(yè)面中滑過(guò)時(shí)的x坐標(biāo)
    moY = e.clientY;  //獲取鼠標(biāo)在頁(yè)面中滑過(guò)時(shí)的y坐標(biāo)
    var box_w = Math.abs(moX - doX);  //目前盒子的寬就為滑過(guò)后的位置減去點(diǎn)擊時(shí)的x的距離，如果點(diǎn)擊后從右向左滑，這時(shí)候就是負(fù)距離，所以需要加一個(gè)絕對(duì)值Math.abs;
    var box_h = Math.abs(moY - doY);  //目前盒子的高就為滑過(guò)后的位置減去點(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ù)滑過(guò)后的點(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;'
    }  //最后給盒子輸出滑過(guò)之后的寬、高、top、left、
}

window.onmouseup = function (e) {  //創(chuàng)建一個(gè)鼠標(biāo)抬起事件；
    on_off = false;  //這時(shí)候就需要把滑過(guò)事件關(guān)閉了；
    e = e || window.event;
    box.style = 'display:none';  //最后抬起為收尾，要給盒子添加隱藏樣式；
}