<!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>
原生js模拟框选选择效果
最新推荐文章于 2023-02-10 16:25:22 发布