<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿苹果手表表盘</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 220px;
background-color: rgb(0, 0, 0);
margin: 200px auto;
overflow: hidden;
position: relative;
}
.box .inner {
position: absolute;
width: 250px;
height: 250px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box .inner .list {
display: flex;
justify-content: space-around;
height: 50px;
}
.box .inner p.item {
width: 46px;
height: 46px;
margin: 2px;
border-radius: 50%;
background-color: antiquewhite;
transform: scale(.2);
font-size: 24px;
font-weight: 700;
text-align: center;
line-height: 46px;
}
</style>
<body>
<div class="box" id="box">
<div class="inner" id="inner">
<div class="list">
<p class="item">A</p>
<p class="item">B</p>
<p class="item">C</p>
<p class="item">D</p>
</div>
<div class="list">
<p class="item">E</p>
<p class="item">F</p>
<p class="item">G</p>
<p class="item">H</p>
<p class="item">I</p>
</div>
<div class="list">
<p class="item">J</p>
<p class="item">K</p>
<p class="item">L</p>
<p class="item">M</p>
</div>
<div class="list">
<p class="item">N</p>
<p class="item">O</p>
<p class="item">P</p>
<p class="item">Q</p>
<p class="item">R</p>
</div>
<div class="list">
<p class="item">S</p>
<p class="item">T</p>
<p class="item">U</p>
<p class="item">V</p>
</div>
<div class="list">
<p class="item">W</p>
<p class="item">X</p>
<p class="item">Y</p>
<!-- <p class="item">Z</p> -->
</div>
</div>
</div>
</body>
<script>
const box = document.getElementById('box');
const inner = document.getElementById('inner');
const item = document.querySelectorAll('.item');
const getCenter = (dom) => {
let r = dom.getBoundingClientRect();
let x = (r.right + r.left) / 2;
let y = (r.bottom + r.top) / 2;
return [x, y];
}
const getDistance = (x1, y1, x2, y2) => {
let dx = Math.abs(x2 - x1);
let dy = Math.abs(y2 - y1);
return Math.sqrt((dx * dx + dy * dy));
}
let centerX, centerY;
[centerX, centerY] = getCenter(box);
const renew = () => {
item.forEach(function (val, index) {
let [itemx, itemy] = getCenter(val);
let distance = getDistance(itemx, itemy, centerX, centerY);
if (distance < 60) {
val.style.transform = 'scale(1)'
} else if (distance >= 60 && distance <= 200) {
let proportion = Math.abs(200 - distance) / 140;
if (proportion < 0.2) proportion = 0.2;
val.style.transform = `scale(${proportion})`;
} else {
val.style.transform = 'scale(.2)'
}
})
}
renew();
window.addEventListener('resize', function () {
[centerX, centerY] = getCenter(box);
renew();
console.log("中心点坐标为 (" + centerX + ", " + centerY + ")");
})
const handleMouseDown = (event) => {
event.preventDefault();
let offsetX = event.clientX - inner.offsetLeft;
let offsetY = event.clientY - inner.offsetTop;
function handleMouseMove(event) {
let left = (event.clientX - offsetX);
let top = (event.clientY - offsetY);
if(left < 50) left = 50;
if(left > 150) left = 150;
if(top < 20) top = 20;
if(top > 150) top = 150;
inner.style.left = left + 'px';
inner.style.top = top + 'px';
renew();
}
function handleMouseUp() {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
}
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
}
inner.addEventListener('mousedown', handleMouseDown);
</script>
</html>
标签：box,const,top,JS,HTML,let,inner,CSS,left From： https://www.cnblogs.com/zgjg/p/17956296