仿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&…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet： https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机（Finite Automaton, FA）到正规文法（Regular Grammar）转换器，它配备了一个直观且完整的图形用户界面，使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）
上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...