移动端悬浮球示例

本文介绍了一种在移动端实现悬浮球拖放效果的方法。通过监听触摸事件,允许用户将悬浮球拖放到屏幕任意位置,并确保悬浮球不会移出屏幕范围。此外,还实现了根据最终释放位置将悬浮球停靠在屏幕左侧或右侧的功能。

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

注意:此例子只适用于移动端;

实现思路

1.拖动元素
2.当拖放位置在左屏时,停靠屏幕在左边,右屏时,停靠在右边
3.当元素顶部(底部)在屏幕外时,停靠在屏幕顶部(底部);

效果图

这里写图片描述

代码

<!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">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <title>悬浮球</title>
</head>
<body>
    <div id="id" style="width: 35px;height: 35px;position: fixed;left: 0px;top: 100px"><img style="width: 35px;height: 35px;" src="qiu.png"></div>

    <script type="text/javascript">
                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))
                    }
                });
        $("#id").click(function(){
            console.log('点击');
        });

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

太吝啬了,点个赞呗(((o(゚▽゚)o)))这里写图片描述

以下是一个简单的 UniApp 悬浮球示例代码: 1. 首先,在你的 UniApp 项目中创建一个名为 "FloatButton" 的自定义组件,可以在 `components` 目录下创建一个 `FloatButton.vue` 文件。 ``` <template> <button class="float-button" @click="handleClick"> <text class="float-button-text">悬浮球</text> </button> </template> <script> export default { methods: { handleClick() { // 点击悬浮球的逻辑代码 console.log("点击了悬浮球"); // 你可以在这里自定义需要的逻辑,如跳转页面、展示菜单等 }, }, }; </script> <style scoped> .float-button { position: fixed; right: 20px; bottom: 20px; width: 80px; height: 80px; border-radius: 50%; background-color: #ff0000; color: #ffffff; font-size: 14px; text-align: center; line-height: 80px; } .float-button-text { display: inline-block; } </style> ``` 2. 接下来,在需要使用悬浮球的页面或组件中引入并使用该自定义组件。例如,在 `pages/index/index.vue` 中使用悬浮球组件: ``` <template> <view class="container"> <!-- 页面内容 --> <FloatButton /> </view> </template> <script> import FloatButton from "../../components/FloatButton.vue"; export default { components: { FloatButton, }, }; </script> <style> .container { /* 页面样式 */ } </style> ``` 通过以上示例代码,你就可以在 UniApp 中实现一个简单的悬浮球了。当用户点击悬浮球时,会在控制台输出"点击了悬浮球"的信息。你可以根据需求自定义悬浮球样式和点击事件的逻辑。希望对你有所帮助!如果还有其他问题,请继续提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值