<!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;}</style> </head> <body> <div id="targetID" style="width:50px;height:50px;position:fixed;left:0px;top:300px;"> <img style="width:50px;height:50px;" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=416449623,3059478773&fm=26&gp=0.jpg"> </div> <script type="text/javascript"> var targetID = document.getElementById("targetID"); var _x_start,_y_start,_x_move,_y_move,_x_end,_y_end,left_start,top_start; //按下 targetID.addEventListener("touchstart",function(e){ _x_start=e.touches[0].pageX;//起始点击位置 _y_start=e.touches[0].pageY;//起始点击位置 left_start=targetID.style.left//元素左边距 top_start=targetID.style.top//元素上边距 }); //移动 targetID.addEventListener("touchmove",function(e){ e.preventDefault();//取消事件的默认动作。 _x_move=e.touches[0].pageX;//当前屏幕上所有触摸点的集合列表 _y_move=e.touches[0].pageY;//当前屏幕上所有触摸点的集合列表 targetID.style.left=parseFloat(_x_move)-parseFloat(_x_start)+parseFloat(left_start)+"px";//左边距=当前触摸点-鼠标起始点击位置+起始左边距 targetID.style.top=parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start)+"px";//上边距=当前触摸点-鼠标起始点击位置+起始上边距 }); //松开 targetID.addEventListener("touchend",function(e){ var bodyW=window.innerWidth/2;//屏幕宽的一半 var bodyH=window.innerHeight;//屏幕高 var _x_end=e.changedTouches[0].pageX;//松开位置 var _y_end=e.changedTouches[0].pageY;//松开位置 var divH= targetID.style.height.substring(0,targetID.style.height.length-2);//元素高 var divW= targetID.style.width.substring(0,targetID.style.width.length-2);//元素宽 if(_x_end<bodyW){ targetID.style.left=‘0px‘//当最终位置在屏幕左半部分 }else if(_x_end>=bodyW){ targetID.style.left=window.innerWidth-parseFloat(divW)+‘px‘;//当最终位置在屏幕左半部分 } if(parseFloat(targetID.style.top)<0){ targetID.style.top=‘0px‘;//当元素顶部在屏幕外时置于顶部 } if(bodyH-_y_end<parseFloat(divH)/2){ targetID.style.top=bodyH-parseFloat(divH)+‘px‘;//当元素底部在屏幕外时置于底部 } }); </script> </body> </html>