使用JQ简单实现H5悬浮球_jquery 实现微信公众号可以悬浮的按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/u011053926/article/details/131808927

这段代码展示了一个简单的HTML/CSS/JavaScript实现，创建了一个在iPhone样式的固定背景上可以移动的圆形Bubble元素。当用户触摸并移动Bubble时，它会在屏幕边界自动反弹。Bubble的移动和边界处理由JavaScript的touchmove和touchend事件处理函数控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
样式有点简单，但功能可以实现，代码非常简单。

  * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        --background: #cacaca;
        --background2: #fff;
    }

    .iphone {
        background-color: var(--background);
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .Bubble {
        border-radius: 50%;
        background-color: var(--background2);
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        border: 15px solid #33a9dc;
        transition: all .1s;
    }

 <div class="iphone">
        <div class="Bubble" ontouchmove="gtouchmove(event)" ontouchend="gtouchend(event)"></div>
    </div>

function gtouchend () {
        let pageCenterX = $('.iphone')[0].clientWidth / 2 - $('.Bubble')[0].offsetWidth / 2
        let maxLeft = $('.iphone')[0].clientWidth - $('.Bubble')[0].offsetWidth
        $('.Bubble')[0].offsetLeft > pageCenterX ? $('.Bubble').css({ left: maxLeft }) : $('.Bubble').css({ left: 0 })
    }
    function gtouchmove (e) {
        let maxLeft = $('.iphone')[0].clientWidth - $('.Bubble')[0].offsetWidth
        let maxTop = $('.iphone')[0].clientHeight - $('.Bubble')[0].offsetHeight
        let X = e.touches[0].clientX - ($('.Bubble')[0].offsetWidth / 2)
        let Y = e.touches[0].clientY - ($('.Bubble')[0].offsetHeight / 2)
        let nodeXY = {
            X: e.touches[0].clientX > maxLeft ? maxLeft : (X < 0) ? 0 : X,
            Y: e.touches[0].clientY > maxTop ? maxTop : (Y < 0) ? 0 : Y
        }
        $('.Bubble').css({ left: nodeXY.X })
        $('.Bubble').css({ top: nodeXY.Y })
    }