使用div创建选取框

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

使用div实现了选取框效果.

代码如下

 <!DOCTYPE html>

 <html>

 <head>

     <title>myCanvasTest</title>

     <style type="text/css">

         #selection{

             border: 3px red solid;

             display: none;

             position: absolute;

         }

         *{

             cursor: crosshair;

         }

     </style>

 </head>

 <body>

     <div id="selection"></div>

 </body>

 <script type="text/javascript">

     var selection,                                                    //存储坐标量(方便用)

         flag             = false,                                    //作为是否在鼠标点击时的移动标记

         selectionDiv     = document.getElementById("selection");        //获取选取框div对象

     //初始化坐标对象

     function init () {

          selection = {

             top        :0,

             left    :0,

             width    :0,

             height    :0

         };

     }

     //鼠标按下,记录坐标

     function setLocation (x, y) {

         selection.left = x;

         selection.top = y;

     }

     //鼠标移动计算距离存入宽高

     function moveLocation (x, y) {

         selection.width = selection.left - x;

         selection.height = selection.top - y;

         moveIt();

     }

     //更新div坐标尺寸信息

     function moveIt () {

         console.log(selection);

         //高度宽度小于0时说明拖拽x,y为正值,如小于0说明拖动为反方向.需重新计算top及left保证拖拽效果

         selectionDiv.style.top         = (selection.height < 0 ?

                                         selection.top :

                                         selection.top - selection.height)

                                     + "px";

         selectionDiv.style.left     = (selection.width < 0 ?

                                         selection.left :

                                         selection.left - selection.width)

                                     + "px";

         //Math.abs()方法返回绝对值

         selectionDiv.style.width     = Math.abs(selection.width)

                                     + "px";

         selectionDiv.style.height     = Math.abs(selection.height)

                                     + "px";

     }

     //显示选取框div

     function showIt () {

         selectionDiv.style.display = "block";

     }

     //隐藏选取框div

     function hideIt () {

         selectionDiv.style.display = "none";

     }

     //鼠标按下触发事件

     window.onmousedown = function (e) {

         var x = e.clientX,

             y = e.clientY;

         //初始化坐标对象

         init();

         //显示div对象

         showIt();

         //设置top,left值.作为本次拖拽的原点

         setLocation(x, y);

         //调用移动方法

         moveIt();

         //将标记打开

         flag = true;

     }

     //鼠标移动时触发

     window.onmousemove = function (e) {

         var x = e.clientX,

             y = e.clientY;

         //当标记开启时,触发事件

         if(flag)

             moveLocation(x, y);

     }

     //鼠标抬起,触发事件,将div隐藏,清除坐标对象,关闭标记

     window.onmouseup = function (e) {

         //隐藏div

         hideIt();

         //清除坐标信息

         init();

         //关闭标记

         flag = false;

     }

 </script>

 </html>