<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
position: absolute;
width: 200px;
height: 200px;
border-radius: 100px;
overflow: hidden;
box-shadow: 5px 5px 10px deepskyblue;
}
.mask {
width: 177px;
height: 213px;
border-radius: 100px;
background: rgb(173, 13, 13);
position: absolute;
top: -125px;
z-index: 1;
animation: gun 10s linear infinite;
}
.ball {
width: 200px;
height: 200px;
position: relative;
border-radius: 50%;
background: linear-gradient(167deg,lightskyblue 57%,deepskyblue 88%);
}
@keyframes gun{
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="mask"></div>
<div class="ball"></div>
</div>
<script>
var box = document.getElementsByClassName("box")[0]; //获取元素
var x, y; //鼠标相对与div左边，上边的偏移
var isDrop = false; //移动状态的判断鼠标按下才能移动
box.onmousedown = function(e) {
var e = e || window.event; //要用event这个对象来获取鼠标的位置
x = e.clientX - box.offsetLeft;
y = e.clientY - box.offsetTop;
isDrop = true; //设为true表示可以移动
}
document.onmousemove = function(e) {
//是否为可移动状态
if(isDrop) {
var e = e || window.event;
var moveX = e.clientX - x; //得到距离左边移动距离
var moveY = e.clientY - y; //得到距离上边移动距离
//可移动最大距离
var maxX = document.documentElement.clientWidth - box.offsetWidth;
var maxY = document.documentElement.clientHeight - box.offsetHeight;
//范围限定 当移动的距离最小时取最大 移动的距离最大时取最小
//范围限定方法一
/*if(moveX < 0) {
moveX = 0
} else if(moveX > maxX) {
moveX = maxX;
}
if(moveY < 0) {
moveY = 0;
} else if(moveY > maxY) {
moveY = maxY;
} */
//范围限定方法二
moveX=Math.min(maxX, Math.max(0,moveX));
moveY=Math.min(maxY, Math.max(0,moveY));
box.style.left = moveX + "px";
box.style.top = moveY + "px";
} else {
return;
}
}
document.onmouseup = function() {
isDrop = false; //设置为false不可移动
}
</script>
</body>
