转载js可拖拽悬浮球特效

最新推荐文章于 2024-08-14 09:16:55 发布

晨晨快跑

最新推荐文章于 2024-08-14 09:16:55 发布

阅读量4.6k

点赞数 1

分类专栏：技术文章标签：悬浮球拖拽点击移动端

技术专栏收录该内容

118 篇文章 0 订阅

订阅专栏

这是一个常见的案例，在写移动端的时候。很多网站APP 都会有类似手机的悬浮球，可以在界面上随意拖动，然后点开就是一个连接，效果图如下
这里写图片描述
图中有一个客服的悬浮球点击是一个窗口连接，可以随意滑动，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div{
            width: 100px;
            height: 50px;
            position:fixed;
            background-color: red;
            border-radius:25px;
        }
    </style>
</head>
<body>
<div class="div" id="div"></div>
</body>
<script>
    window.onload=function(){
        var flag = 0; //标记是拖曳还是点击
        var oDiv = document.getElementById('div');
        var disX,moveX,L,T,starX,starY,starXEnd,starYEnd;
        oDiv.addEventListener('touchstart',function(e){
            flag = 0;
            e.preventDefault();//阻止触摸时页面的滚动，缩放
            disX = e.touches[0].clientX - this.offsetLeft;
            disY = e.touches[0].clientY - this.offsetTop;
//手指按下时的坐标
            starX = e.touches[0].clientX;
            starY = e.touches[0].clientY;
//console.log(disX);
        });
        oDiv.addEventListener('touchmove',function(e){
            flag = 1;
            L = e.touches[0].clientX - disX ;
            T = e.touches[0].clientY - disY ;
//移动时 当前位置与起始位置之间的差值
            starXEnd = e.touches[0].clientX - starX;
            starYEnd = e.touches[0].clientY - starY;
//console.log(L);
            if(L<0){//限制拖拽的X范围，不能拖出屏幕
                L = 0;
            }else if(L > document.documentElement.clientWidth - this.offsetWidth){
                L=document.documentElement.clientWidth - this.offsetWidth;
            }
            if(T<0){//限制拖拽的Y范围，不能拖出屏幕
                T=0;
            }else if(T>document.documentElement.clientHeight - this.offsetHeight){
                T = document.documentElement.clientHeight - this.offsetHeight;
            }
            moveX = L + 'px';
            moveY = T + 'px';
//console.log(moveX);
            this.style.left = moveX;
            this.style.top = moveY;
        });
        window.addEventListener('touchend',function(e){
//alert(parseInt(moveX))
//判断滑动方向
            if(flag === 0) {//点击
                window.location.href='http://www.baidu.com';
                    }
        });
    }
</script>
</html>

代码可以直接引用，简单易懂，仅仅适用于移动端。

转载地址：https://blog.csdn.net/cdx1170776994/article/details/78937621