pc 移动端防iPhone悬浮球效果

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>pc 移动端 仿iPhone悬浮球效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .assistive-wrap {
            width: 58px;
            height: 58px;
            position: fixed;
            top: 50%;
            margin-top: -29px;
            left: 1px;
        }

        .assistive-touch {
            width: 100%;
            height: 100%;
            background: #343434;
            border-radius: 10px;
            opacity: .3;
            position: relative;
        }

        .assistive-touch:before,
        .assistive-touch:after,
        .assistive-touch span {
            content: '';
            position: absolute;
            border-radius: 100%;
            box-shadow: 0 0 2px rgba(30, 30, 30, .5);
            display: block;
            background: rgba(255, 255, 255, .6);
        }

        .assistive-touch:before {
            width: 42px;
            height: 42px;
            left: 8px;
            top: 8px;
            opacity: .5;
        }

        .assistive-touch span {
            width: 34px;
            height: 34px;
            left: 12px;
            top: 12px;
        }

        .assistive-touch:after {
            width: 26px;
            height: 26px;
            left: 16px;
            top: 16px;
            background: #fff;
        }

        .animate {
            transition: 0.4s;
        }
    </style>
    <script>
        window.onload = function () {
            var startEvt, moveEvt, endEvt
            var clientWidth = document.documentElement.clientWidth;
            var clientHeight = document.documentElement.clientHeight;

            if ('ontouchstart' in window) {
                startEvt = 'touchstart'
                moveEvt = 'touchmove'
                endEvt = 'touchend'
            } else {
                startEvt = 'mousedown'
                moveEvt = 'mousemove'
                endEvt = 'mouseup'
            }
            var drag = document.getElementById("assistive-wrap");
            drag.style.position = 'absolute'
            drag.style.cursor = 'move';
            // 标记是拖曳还是点击
            var isClick = true
            var disX, disY, left, top, starX, starY
            drag.addEventListener(startEvt, function (e) {
                // 阻止页面的滚动，缩放
                e.preventDefault()
                // 兼容IE浏览器
                var e = e || window.event
                isClick = true
                // 手指按下时的坐标
                starX = e.touches ? e.touches[0].clientX : e.clientX
                starY = e.touches ? e.touches[0].clientY : e.clientY
                // 手指相对于拖动元素左上角的位置
                disX = starX - drag.offsetLeft
                disY = starY - drag.offsetTop
                // 按下之后才监听后续事件
                document.addEventListener(moveEvt, moveFun)
                document.addEventListener(endEvt, endFun)
            })

            function moveFun(e) {
                drag.classList.remove("animate");
                // 兼容IE浏览器
                var e = e || window.event
                // 防止触摸不灵敏，拖动距离大于20像素就认为不是点击，小于20就认为是点击跳转
                if (
                    Math.abs(starX - (e.touches ? e.touches[0].clientX : e.clientX)) > 20 ||
                    Math.abs(starY - (e.touches ? e.touches[0].clientY : e.clientY)) > 20
                ) {
                    isClick = false
                }
                left = (e.touches ? e.touches[0].clientX : e.clientX) - disX
                top = (e.touches ? e.touches[0].clientY : e.clientY) - disY
                // 限制拖拽的X范围，不能拖出屏幕
                if (left < 0) {
                    left = 0
                } else if (left > clientWidth - drag.offsetWidth) {
                    left = clientWidth - drag.offsetWidth
                }
                // 限制拖拽的Y范围，不能拖出屏幕
                if (top < 0) {
                    top = 0
                } else if (top > document.documentElement.clientHeight - drag.offsetHeight) {
                    top = document.documentElement.clientHeight - drag.offsetHeight
                }
                drag.style.left = left + 'px'
                drag.style.top = top + 'px'
            }

            function endFun(e) {
                drag.classList.add('animate');
                var dargCenterX = drag.offsetLeft + drag.offsetWidth / 2;
                console.log(drag.offsetWidth / 2);
                console.log(dargCenterX);
                if (dargCenterX < clientWidth / 2) {
                    //吸附左侧
                    drag.style.left = 0;
                } else {
                    //吸附在右侧
                    drag.style.left = clientWidth - drag.offsetWidth + "px";
                }

                document.removeEventListener(moveEvt, moveFun)
                document.removeEventListener(endEvt, endFun)
                if (isClick) { // 点击
                    // window.location.href = dragLink
                }
            }


        }
    </script>
</head>

<body>

    <div class="assistive-wrap" id="assistive-wrap">
        <div class="assistive-touch">
            <span></span>
        </div>
    </div>


</body>

</html>
image.png
参考 https://juejin.cn/post/6854573211284144135
https://www.bbsmax.com/A/qVden0DMzP
pc 移动端 防iPhone悬浮球效果

推荐阅读更多精彩内容

pc 移动端防iPhone悬浮球效果
