悬浮球拖拽

最新推荐文章于 2025-06-26 16:50:48 发布

郭豪杨

最新推荐文章于 2025-06-26 16:50:48 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42603150/article/details/80925710

这篇博客介绍了如何使用HTML、CSS和JavaScript实现一个悬浮球，并通过触屏事件监听实现拖拽功能。当悬浮球移动到屏幕边缘时，会自动调整位置。同时，点击悬浮球内的X标记可以隐藏悬浮球。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!-- Smart App Banner -->
    <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
    <!-- 禁止自动探测并格式化手机号码 -->
    <meta name="format-detection" content="telephone=no">
    <!-- Add to Home Screen添加到主屏 -->
    <!-- 是否启用 WebApp 全屏模式 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 添加到主屏后的标题 -->
    <meta name="apple-mobile-web-app-title" content="App Title">
    <title>悬浮球</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /*#id{*/
            /*width: 50px;*/
            /*height: 50px;*/
            /*position: fixed;*/
            /*left: 0px;top: 300px;*/

            /*background: darkgrey;*/
        /*}*/
        /*#span{*/
            /*font-size: 18px;*/
            /*position: absolute;*/
        /*}*/



    </style>

</head>
<body>
<!--<div id="id" style="">-->
    <!--<img style="width: 35px;height: 35px;" src="d3e78caf201e0cf7c0b137b402817f02_1.jpg">-->
    <!--<span id="span">X</span>-->
<!--</div>-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js "></script>
<script type="text/javascript">


    var box_div=document.createElement('div');

    box_div.style.cssText = " width: 50px;height: 50px;position: fixed; left: 0px;top: 300px;background: darkgrey;";

    box_div.setAttribute('id','id');

    var img=document.createElement('img');

    img.style.cssText='width: 35px;height: 35px;';

     // document.body.insertBefore(box_div);

    document.body.insertBefore(box_div,document.body.children[0]);

     img.setAttribute('src','d3e78caf201e0cf7c0b137b402817f02_1.jpg');

    box_div.appendChild(img);

    var spn=document.createElement('span');

    spn.setAttribute('id','span');

    spn.innerHTML='X';

    box_div.appendChild(spn);



    var _x_start,_y_start,_x_move,_y_move,_x_end,_y_end,left_start,top_start;
    //按下
    document.getElementById("id").addEventListener("touchstart",function(e)
    {
        _x_start=e.touches[0].pageX;//起始点击位置
        _y_start=e.touches[0].pageY;//起始点击位置
        left_start=$("#id").css("left");//元素左边距
        top_start=$("#id").css("top");//元素上边距
    });
    //移动
    document.getElementById("id").addEventListener("touchmove",function(e)
    {
        e.preventDefault();//取消事件的默认动作。
        _x_move=e.touches[0].pageX;//当前屏幕上所有触摸点的集合列表
        _y_move=e.touches[0].pageY;//当前屏幕上所有触摸点的集合列表
        //左边距=当前触摸点-鼠标起始点击位置+起始左边距
        $("#id").css("left",parseFloat(_x_move)-parseFloat(_x_start)+parseFloat(left_start)+"px");
        //上边距=当前触摸点-鼠标起始点击位置+起始上边距
        $("#id").css("top",parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start)+"px");
    });
    //松开
    document.getElementById("id").addEventListener("touchend",function(e)
    {

        var bodyW=$(window).width()/2;//屏幕宽的一半
        var bodyH=$(window).height();//屏幕高
        var _x_end=e.changedTouches[0].pageX;//松开位置
        var _y_end=e.changedTouches[0].pageY;//松开位置
        var divH= $("#id").height();//元素高
        var divW= $("#id").width();//元素宽
        //当最终位置在屏幕左半部分
        if(_x_end<bodyW){
            $("#id").css("left","0px");
        }else if(_x_end>=bodyW){//当最终位置在屏幕左半部分
            $("#id").css("left",$(window).width()-parseFloat(divW))
        }
        //当元素顶部在屏幕外时
        if(parseFloat($("#id").css("top"))<0){
            //置于顶部
            $("#id").css("top",0);//置于顶部
        }
        //当元素底部在屏幕外时
        if(bodyH-_y_end<parseFloat(divH)/2){
            //置于底部
            $("#id").css("top",bodyH-parseFloat(divH))
        }
    });
    $("img").click(function(){
        console.log('点击');
    });
    $('#span').click(function(){
        $('#id').css({
            display:'none'
        })
    })


</script>
</body>
</html>