<!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>
