1,惯性
<!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>惯性</title>
<style>
* {
padding: 0;
margin: 0;
}
#demo {
width: 100px;
height: 100px;
background-color: brown;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="demo"></div>
<script>
var div1 = document.getElementById("demo");
var disX, disY;
var drag = false; //判断是否可以拖拽
var timer; //定时器
function bindEvent() {
var speedX = 0,
speedY = 0;//速度
var lastX = 0,
lastY = 0;//最后一次的距离
div1.onmousedown = function (e) {
var e = e || window.event;
disX = e.clientX - div1.offsetLeft;
dixY = e.clientY - div1.offsetTop;
drag = true;
}
document.onmousemove = function (e) {
var e = e || window.event;
if (drag) {
div1.style.left = e.clientX - disX + "px";
div1.style.top = e.clientY - dixY + "px";
}
speedX = div1.offsetLeft - lastX;
speedY = div1.offsetTop - lastY;
lastX = div1.offsetLeft;
lastY = div1.offsetTop;
console.log(speedX + "-------" + div1.offsetLeft + "-------"+ lastX);
}
div1.onmouseup = function () {
drag = false;
move(div1, speedX, speedY);
}
}
function move(div, speedX, speedY) {
clearInterval(timer);
timer = setInterval(function () {
speedX *= 0.95;
speedY *= 0.95;//摩擦系数
div1.style.left = div.offsetLeft + speedX + "px";
div1.style.top = div.offsetTop + speedY + "px";
console.log(div1.style.left + "==========" + div1.style.top);
if (Math.abs(speedX) < 1) {
speedX = 0;
}
if (Math.abs(speedY) < 1) {
speedY = 0;
}
if (speedX == 0 && speedY == 0) {
clearInterval(timer);
}
console.log(speedX + ">>>" + speedY);
}, 30);
}
bindEvent();
</script>
</body>
</html>
拖拽物块之后,物块会随着惯性再望前方‘溜’一点距离。
2,鼠标位置判断
<!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>公式导出鼠标位置判断</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 400px;
height: 200px;
background-color: red;
margin: 200px auto;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var oBox = document.getElementById('box');
//判断鼠标在元素上的移入移出(上下左右)
//mouseenter mouseleave + direction
function bindEvent() {
oBox.onmouseenter = function (e) {
get(e,'in');
}
oBox.onmouseleave = function (e) {
get(e,'out');
}
}
function get(event,state) {
var d = getDer(event);
var dir = '';
switch (d) {
case 0:
dir = '-top';
break;
case 1:
dir = '-right';
break;
case 2:
dir = '-bottom';
break;
case 3:
dir = '-left';
break;
}
console.log(state + dir);
}
function getDer(event) {
var d;
var w = oBox.offsetWidth;
var h = oBox.offsetHeight;
// 确定坐标系以中心为圆心
var x = (event.clientX - oBox.offsetLeft - w / 2) * (w > h ? (h / w) : 1);
var y = (event.clientY - oBox.offsetTop - h / 2) * (h > w ? (w / h) : 1);
// console.log(x, y);
// Math.tan2(y,x);//弧度范围
//弧度=》角度 Math.tan2(y,x)*(180/Math.PI)
//(-180~180) + 180 = (0 ~ 360)
//Math.tan2(y,x)*(180/Math.PI) + 180
//top : -135 ~ -45 -- +180 === 45~135--->1 ->4 ->0
//right : 0 ~ 45 -45 ~ 0 -- +180 === 135~225--->2 ->5 ->1
//bottom : 45 ~ 135 -- +180 === 225~315--->3 ->6 ->2
//left : -180 ~ -135 135 ~180 -- +180 === 315~360--->0 4 -> 3 7-> 3
//(Math.round((Math.tan2(y,x)*(180/Math.PI) + 180)/90) + 3)%4
d = (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4;
// console.log(d);
return d;
}
bindEvent();
</script>
</body>
</html>
当鼠标从某个方位移进或者移出方块时,有移进或者移出,搭配着上下左右。
3,拖拽与覆盖
<!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>拖拽与覆盖</title>
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
z-index: 10;
}
#box2 {
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<script>
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var body = document.getElementsByTagName('body')[0];
var disX, disY;
var drag = false;
var box2Left = box2.offsetLeft;
var box2Top = box2.offsetTop;
var box2Width = box2.offsetWidth;
var box2Height = box2.offsetHeight;
var box1Width = box1.offsetWidth;
var box1Height = box1.offsetHeight;
function bindEvent() {
box1.onmousedown = function (e) {
drag = true;
var e = e || window.event;
disX = e.clientX - box1.offsetLeft;
disY = e.clientY - box1.offsetTop;
}
body.onmousemove = function (e) {
var e = e || window.event;
if (drag) {
box1.style.left = e.clientX - disX + "px";
box1.style.top = e.clientY - disY + "px";
var box1Left = box1.offsetLeft;
var box1Top = box1.offsetTop;
var coverWidth = 0,
coverHeight = 0; //覆盖高度和宽度
if ((box1Left + box1Width >= box2Left) && (box1Left <= box2Left)) {
coverWidth = box1Left + box1Width - box2Left;
} else if ((box2Left + box2Width >= box1Left) && (box2Left + box2Width <= box1Left + box1Width)) {
coverWidth = box2Left + box2Width - box1Left;
}
if ((box1Top + box1Height >= box2Top) && (box2Top >= box1Top)) {
coverHeight = box1Top + box1Height - box2Top;
} else if ((box2Top + box2Height >= box1Top) && (box1Top + box1Height >= box2Top + box2Height)) {
coverHeight = box2Top + box2Height - box1Top;
}
console.log(coverWidth * coverHeight);
}
}
box1.onmouseup = function () {
drag = false;
}
}
bindEvent();
</script>
</body>
</html>
当红色物块覆盖到黑色物块上,打印出覆盖的面积。