仿IOS桌面悬浮球（支持拖拽、自动吸附、自动改变透明度与点击、兼容PC端与移动端）
使用 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>
相关文章：
仿IOS桌面悬浮球（支持拖拽、自动吸附、自动改变透明度与点击、兼容PC端与移动端）
使用 pointerdown/pointermove/pointerup 实现仿IOS桌面悬浮球效果，支持拖拽、指定拖拽选对容器，指定拖拽安全区、自动吸附、自动改变透明度与点击，兼容PC端与移动端。 效果展示 https://code.juejin.cn/pen/7423757568268304421 代码实现 …...
智谱开放平台API调用解析
一、什么是智谱AI 智谱AI成立于2019年，由清华大学计算机系知识工程实验室的技术成果转化而来，是一家致力于人工智能技术研发和应用的公司。智谱致力于打造新一代认知智能大模型，专注于做大模型的中国创新。 二、智谱开放平台API调用 官方文…...
Linux中定时删除10天前的日志文件
例如：删除/data/log/目录下所有10天前的.log文件 find /data/log/ -type f -name "*.log" -mtime 10 -exec rm -f {} \;只查看要删除的文件有哪些，不真正删除文件 logfiles$(find /data/log/ -type f -name "*.log" -mtime 10) ec…...
贝壳Android面试题及参考答案
详细说Final关键字 在编程语言中，final关键字具有重要的作用。以下为你详细介绍final关键字： 一、final关键字的主要作用 修饰变量 当final修饰基本数据类型变量时，该变量的值一旦被初始化就不能再被改变。例如：final int num = 10;num = 20; // 这会导致编译错误当final修…...
基于vue的酒店预订管理系统（源码+定制+开发）
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台…...
FreeRTOS——TCB任务控制块、任务句柄、任务栈详解
任务控制块结构体 任务控制块是 FreeRTOS 中用于描述和管理任务的数据结构，包含了任务的状态、优先级、堆栈等信息。 TCB_t的全称为Task Control Block，也就是任务控制块，这个结构体包含了一个任务所有的信息，它的定义以及相关变…...
【STM32单片机_(HAL库)】4-5-2【定时器TIM】【感应开关盖垃圾桶项目】HC-SR04超声波模块实验
1.硬件 STM32单片机最小系统HC-SR04超声波模块 2.软件 hcsr04驱动文件添加main.c程序 #include "sys.h" #include "delay.h" #include "led.h" #include "uart1.h" #include "hcsr04.h"int main(void) {HAL_Init(); …...
安全网络架构
网络安全解决方案是指通过一系列技术和措施来保护网络系统和数据的安全。它涉及多个方面，包括网络设备的防护、数据的加密和备份、安全策略的制定和执行等。以下是一些常见的网络安全解决方案： 防火墙：防火墙是一种硬件或软件设备，…...
【万字长文】Word2Vec计算详解（二）Skip-gram模型
【万字长文】Word2Vec计算详解（二）Skip-gram模型 写在前面 本篇介绍Word2Vec中的第二个模型Skip-gram模型 【万字长文】Word2Vec计算详解（一）CBOW模型 markdown行 9000 【万字长文】Word2Vec计算详解（二）S…...
随机掉落的项目足迹：解决TypeError: Cannot read properties of undefined (reading ‘push‘)报错
问题引入 下面是request.js中请求拦截器相关的代码 但是运行时却出现了报错 问题解决 useRouter() 是 Vue Router 提供的组合式 API，它只能在 Vue 组件的 setup() 函数中有效。如果在其他地方（例如 Axios 的拦截器中）调用它，可…...
ChatTTS 本地安装和测试
Ubuntu 22服务器，3.9/3.10都可以，但是 3.11不可以 sudo apt install python3.10 apt install python3.10 python3.10-dev #ubuntu 22 安装python3.10对应的pip3.10 # 下载 get-pip.py curl -sS https://bootstrap.pypa.io/get-pip.py -o get-pip.py # 使…...
[Leetcode] 560 Subarray Sum Equals K
题意：给定一个数组求连续的子数组的和为k的有几个 Input: nums [1,1,1], k 2 Output: 2 https://leetcode.com/problems/subarray-sum-equals-k/description/ 首先思考1.因为是subarray sum前缀和很容易想到，那问题就转化成preSum[i] preSum[j] - k…...
TCL Android面试题大全及参考答案
能谈谈Jetpack组件吗？ Jetpack 是一套用于 Android 开发的工具和组件库，它可以帮助开发者更高效地构建高质量的 Android 应用。 一、主要组件分类 架构组件： ViewModel：负责存储和管理与界面相关的数据，当屏幕旋转或配置发生变化时，ViewModel 可以帮助保存数据，避免数据…...
JVM错误：OutOfMemoryError: GC overhead limit exceeded
OutOfMemoryError: GC overhead limit exceeded 在Window服务器上跑一个项目，无意中出现服务访问不了，查看日志文档，第一次遇到了这个异常信息。 1. 错误含义 OutOfMemoryError: GC overhead limit exceeded 是 JVM 中的一种错误ÿ…...
Unity网络开发 - C#开源网络通信库PESocket的使用
概述 在现代多人在线游戏中，稳定且高效的网络通信是确保游戏体验的关键。本文将探讨如何利用C#开源网络通信库PESocket来构建一个简单的Unity客户端与.NET控制台服务器之间的实时消息传递系统。通过本例，读者不仅能够了解PESocket的基本用法，…...
【完-网络安全】Shell与脚本
文章目录 1.CLI与GUI2.终端和Shell2.1 Shell 壳层2.2 终端2.3 终端和Shell区别3.标准流 4.PowerShell4.1 管理员与非管理员4.2 指令4.3 重定向4.4 管道 5.环境变量5.1 影响范围5.2环境变量的作用5.3 常见的环境变量 6.脚本 1.CLI与GUI CLI命令行界面(CLl,Command Line Interfa…...
磁盘标签和分区标签
在Windows中，我们为分区命名，那个名字就是「分区标签」。所以说“分区标签”是给分区的一个名字。 「磁盘标签」其实是我们经常说的「分区表」，比如MBR、GPT等等。而「分区标签」，虽然叫做“分区”标签，但它则是文件系…...
关于摩托车一键启动无钥匙进入、智能科技创新
摩托车一键启动无钥匙进入功能 一、工作原理 摩托车的一键启动无钥匙进入功能采用了世界最先进的RFID无线射频技术和最先进的车辆身份编码识别系统，率先应用小型化、小功率射频天线的开发方案，并成功融合了遥控系统和无钥匙系统，沿用了传统…...
怎么找矩阵系统，怎么源码搭建，源头技术开发需要哪些支持
一、引言 在进行矩阵系统源码搭建时，选择合适的工具至关重要。正确的工具选择不仅可以提高开发效率，还能确保系统的稳定性、可扩展性和性能。本文将探讨在矩阵系统源码搭建过程中如何选择合适的工具。 二、前端开发工具选择 前端框架 React：由…...
云原生化 - 工具镜像（简约版）
在微服务和云原生环境中，容器化的目标之一是尽可能保持镜像小型化以提高启动速度和减少安全风险。然而，在实际操作中，有时候需要临时引入一些工具来进行调试、监控或问题排查。Kubernetes提供了临时容器（ephemeral containers&…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
跨链模式：多链互操作架构与性能扩展方案
跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...
SpringTask-03.入门案例
一.入门案例 启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
大数据学习（132）-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言Ǵ…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中，CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时，通常会导致应用响应缓慢，甚至服务不可用，严重影响用户体验和业务运行。因此，掌握一套科学有效的CPU飙高问题排查方法&…...
基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用，结合SQLite数据库实现联系人管理功能，并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能，同时可以最小化到系统…...