玩个球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>玩个球</title>
<style>
.parent { margin: 20px auto; padding: 10px; width: 80vw; height: 80vh; border: 1px solid gray; user-select: none; overflow: hidden; position: relative; }
.parent::before { content: '添加的球球可以在框内自由拖动'; }
.son { --bg1: #998d21; --bg2: #229dee; position: absolute; width: 100px; height: 100px; background: linear-gradient(var(--bg1), var(--bg2)); border-radius: 50%; cursor: move; display: grid; place-items: center; }
.moving { animation: escape var(--du) forwards; }
.tMid { text-align: center; }
#btnAdd { transform: translateX(100px); }
@keyframes escape {
to { left: var(--xx); top: var(--yy); }
}
</style>
</head>
<body>
<div id="pa" class="parent"></div>
<p class="tMid"><input type="button" id="btnAdd" value="添加球球" /></p>
<script>
const pa = document.getElementById('pa');
const sons = [];
let dragger = null;
let offsetX, offsetY, counter = 0;
const startDrag = (e) => {
const target = e.target.closest('.son');
if (!target) return;
dragger = target;
offsetX = e.clientX - target.offsetLeft;
offsetY = e.clientY - target.offsetTop;
e.preventDefault();
};
const doDrag = (e) => {
if (!dragger) return;
let newX = e.clientX - offsetX;
let newY = e.clientY - offsetY;
const maxX = pa.offsetWidth - dragger.offsetWidth;
const maxY = pa.offsetHeight - dragger.offsetHeight;
newX = Math.max(0, Math.min(newX, maxX));
newY = Math.max(0, Math.min(newY, maxY));
dragger.style.left = newX + 'px';
dragger.style.top = newY + 'px';
};
const stopDrag = () => dragger = null;
const endAnimation = () => {
sons.forEach(son => {
son.onanimationend = () => {
pa.removeChild(son);
const rest = document.querySelectorAll('.son');
if (rest.length < 1) {
sons.length = 0;
counter = 0;
btnAdd.disabled = false;
}
}
});
};
pa.addEventListener('touchstart', (e) => {
const touch = e.touches[0];
const mouseEvent = new MouseEvent('mousedown', {
clientX: touch.clientX,
clientY: touch.clientY
});
startDrag(mouseEvent);
});
document.addEventListener('touchmove', (e) => {
if (!dragger) return;
const touch = e.touches[0];
const mouseEvent = new MouseEvent('mousemove', {
clientX: touch.clientX,
clientY: touch.clientY
});
doDrag(mouseEvent);
e.preventDefault();
});
btnAdd.addEventListener('click', () => {
counter ++;
if (counter > 10) {
sons.forEach(son => {
son.classList.add('moving');
});
btnAdd.disabled = true;
endAnimation();
return;
}
const son = document.createElement('div');
son.innerText = counter;
son.classList.add('son');
son.style.cssText += `
left: ${Math.floor(Math.random() * (pa.offsetWidth - 100))}px;
top: ${Math.floor(Math.random() * (pa.offsetHeight - 100))}px;
--bg1: #${Math.random().toString(16).substring(2,8)};
--bg2: #${Math.random().toString(16).substring(2,8)};
--du: ${Math.random() * 4 + 2}s;
--xx: ${(Math.random() > 0.5 ? 1 : -1) * window.innerWidth}px;
--yy: ${(Math.random() > 0.5 ? 1 : -1) * window.innerHeight}px;
`;
pa.appendChild(son);
sons.push(son);
});
pa.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', doDrag);
document.addEventListener('mouseup', stopDrag);
document.addEventListener('touchend', stopDrag);
</script>
</body>
</html>
前一篇: 折叠表格演示
下一篇: 随机背景色和前景色搭配问题
发表评论:
评论列表 [0条]
