当前位置：首页 > news >正文

仿IOS桌面悬浮球（支持拖拽、自动吸附、自动改变透明度与点击、兼容PC端与移动端）

news 2025/8/18 12:33:35

使用 pointerdown/pointermove/pointerup 实现仿IOS桌面悬浮球效果，支持拖拽、指定拖拽选对容器，指定拖拽安全区、自动吸附、自动改变透明度与点击，兼容PC端与移动端。

效果展示

在这里插入图片描述
https://code.juejin.cn/pen/7423757568268304421

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}#app {width: 40px;height: 40px;background-color: rgba(0, 0, 0, 0.15);position: absolute;left: 50px;top: 50px;cursor: pointer;user-select: none;/** 处理移动端只能小范围拖动 */touch-action: none;border-radius: 50%;/** 处理移动端点击蓝色背景 */-webkit-tap-highlight-color: transparent;}#app::before,#app::after {content: '';display: block;width: 120%;height: 120%;border-radius: 50%;background-color: rgba(0, 0, 0, 0.15);position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}#app::after {width: 80%;height: 80%;}.parent {width: 50vw;height: 50vh;background-color: #f1f1f1;}</style>
</head><body><div class="parent"><div id="app"></div></div><script>const initDrag = (app, options = {}) => {if (!app) returnconst {gaps = [10, 10], // 左右间距和上下间距（安全区）relative = 'window', // 相对容器 window | parentautoAdsorb = true, // 是否自动吸附autoAlpha = true, // 是否自动改变透明度onClick // 点击事件} = optionslet isPointerDown = falseconst parentRect = app.parentElement.getBoundingClientRect()const parentWidth = parentRect.widthconst parentHeight = parentRect.heightlet maxLeft = 0let maxTop = 0if (relative === 'parent') {maxLeft = ((parentWidth || window.innerWidth) - app.clientWidth) - gaps[0]maxTop = ((parentHeight || window.innerHeight) - app.clientHeight) - gaps[1]} else {maxLeft = window.innerWidth - app.clientWidth - gaps[0]maxTop = window.innerHeight - app.clientHeight - gaps[1]}let startLeft, startTop; // 记录开始位置app.addEventListener('pointerdown', function (e) {isPointerDown = trueapp.style.transition = 'none'app.style.opacity = 1startLeft = e.clientX;startTop = e.clientY;});app.addEventListener('pointermove', function (e) {app.setPointerCapture(e.pointerId)if (isPointerDown) {const left = app.getBoundingClientRect().leftconst top = app.getBoundingClientRect().toplet newLeft = e.clientX - leftlet newTop = e.clientY - toplet movedLeft = newLeft + left - app.clientWidth / 2let movedTop = newTop + top - app.clientHeight / 2// 限制上、左移出边界（默认边界为窗口宽高）movedLeft = Math.max(gaps[0], movedLeft)movedTop = Math.max(gaps[0], movedTop)// 限制下、右移出边界（默认边界为窗口宽高）movedLeft = Math.min(movedLeft, maxLeft)movedTop = Math.min(movedTop, maxTop)app.style.left = movedLeft + 'px'app.style.top = movedTop + 'px'}});// 自动降低透明度let autoAlphaTimer = nullconst handleAutoAlpha = () => {autoAlphaTimer && clearTimeout(autoAlphaTimer)autoAlphaTimer = setTimeout(() => {app.style.opacity = 0.7}, 1000)}// 自动吸附let autoAdsorbTimer = nullconst handleAutoAdsorb = () => {autoAdsorbTimer && clearTimeout(autoAdsorbTimer)autoAdsorbTimer = setTimeout(() => {const left = app.getBoundingClientRect().leftconst movedLeft = left > maxLeft / 2 ? maxLeft : gaps[0]app.style.transition = 'all 300ms ease-in-out'app.style.left = movedLeft + 'px'autoAlpha && handleAutoAlpha()}, 100)}app.addEventListener('pointerup', function (e) {isPointerDown = false// 判断是否为点击事件const endX = e.clientX;const endY = e.clientY;const distance = Math.sqrt((endX - startLeft) ** 2 + (endY - startTop) ** 2);// 如果移动距离小于 5 像素，则认为是点击if (distance < 5) {app.style.transition = 'none';app.style.opacity = 1;app.style.left = startLeft - app.clientWidth / 2 + 'px'app.style.top = startTop - app.clientHeight / 2 + 'px'onClick && onClick()} else {if (autoAdsorb) {handleAutoAdsorb()} else if (autoAlpha) {handleAutoAlpha()}}});}initDrag(document.getElementById('app'), {onClick: () => {alert('click')}})</script>
</body></html>