去哪里可以做网站,网站开发界面图标设计,江门网站制作公司,wordpress 点击排行使用 pointerdown/pointermove/pointerup 实现仿IOS桌面悬浮球效果#xff0c;支持拖拽、指定拖拽选对容器#xff0c;指定拖拽安全区、自动吸附、自动改变透明度与点击#xff0c;兼容PC端与移动端。
效果展示 https://code.juejin.cn/pen/7423757568268304421
代码实现 …使用 pointerdown/pointermove/pointerup 实现仿IOS桌面悬浮球效果支持拖拽、指定拖拽选对容器指定拖拽安全区、自动吸附、自动改变透明度与点击兼容PC端与移动端。
效果展示 https://code.juejin.cn/pen/7423757568268304421
代码实现
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {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
/headbodydiv classparentdiv idapp/div/divscriptconst 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 noneapp.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 pxapp.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-outapp.style.left movedLeft pxautoAlpha 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 pxapp.style.top startTop - app.clientHeight / 2 pxonClick onClick()} else {if (autoAdsorb) {handleAutoAdsorb()} else if (autoAlpha) {handleAutoAlpha()}}});}initDrag(document.getElementById(app), {onClick: () {alert(click)}})/script
/body/html
