原生js模擬框選選擇效果
阿新 • • 發佈：2018-11-03
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原生js模擬框選選擇效果</title> <style> *{margin:0;padding:0;} body{ position:absolute; height:100%; width:100%; background:#ccc; } #box{ position:absolute; background:blue; opacity: 0.3; border:2px solid #fff; } </style> </head> <body> </body> <script> var pageX = null; var pageY = null; var left = null; var top = null; var body = document.body; var isDown = false; function $(select){ return document.querySelector(select) } body.onmousedown = function () { isDown = true; let box = document.createElement('DIV'); let e = event || window.event; pageX = e.pageX; left = e.pageX; pageY = e.pageY; top = e.pageY; box.id = 'box'; box.style.display = 'none'; box.style.left = pageX + 'px'; box.style.top = pageY + 'px'; body.appendChild(box); }; body.onmousemove = function (e) { if (isDown) { let pagex = event.pageX; let pagey = event.pageY; let width = pagex - pageX; let height = pagey - pageY; if (width > 0) { $('#box').style.display = 'block'; $('#box').style.width = width + 'px'; $('#box').style.height = height + 'px'; } else { $('#box').style.display = 'block'; $('#box').style.top = pagey + 'px'; $('#box').style.left = pagex + 'px'; $('#box').style.width = (-width) + 'px'; $('#box').style.height = (-height) + 'px'; } } }; body.onmouseup = function (e) { let box = $('#box'); left = 0; top = 0; pageX = 0; pageY = 0; isDown = false; body.removeChild(box); }; </script> </html>