html滑動仿懸浮球菜單

//聲明屬性賦值
var flag=0;
var motion = document.getElementById('xuanfu');
var disX,disY; //元素左/上 ‘半徑’
var moveX,moveY;
var L,T; //可移動范圍
var starX,starY;
var starXEnd,starYEnd;
//監聽移動開始
motion.addEventListener('touchstart',touchstartFun);
function touchstartFun(e){
flag = 0;
e.preventDefault(); //阻止觸摸按鈕時頁面滾動和縮放
//獲取元素左/上邊到中心（clientX,clientY）的距離
disX = e.touches[0].clientX - this.offsetLeft;
disY = e.touches[0].clientY - this.offsetTop;
//手指按下屏幕時的坐標
starX = e.touches[0].clientX;
starY = e.touches[0].clientY;
motion.addEventListener('touchend',touchendFun);//監聽點擊
}
//監聽移動事件
motion.addEventListener('touchmove',function(e){
motion.removeEventListener('touchend',touchendFun);//刪除監聽點擊事件
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;
if(L<0){
L = 0; //限制拖拽的X范圍，不能拖出屏幕
}else if(L > document.documentElement.clientWidth - this.offsetWidth){
L=document.documentElement.clientWidth - this.offsetWidth;
}
if(T<60){ //這里的60是y坐標上下邊距
T=60; //限制拖拽的Y范圍，不能拖出屏幕
}else if(T>document.documentElement.clientHeight - this.offsetHeight-60){
T = document.documentElement.clientHeight - this.offsetHeight - 60;
}
moveX = L +'px';
moveY = T +'px';
this.style.left = moveX;
this.style.top = moveY;
$('.xf-div').hide();
localStorage.setItem('moveX',moveX); //設置本地緩存位置
localStorage.setItem('moveY',moveY);
});
//監聽點擊事件
motion.addEventListener('touchend',touchendFun);
function touchendFun(e){
motion.addEventListener('touchstart',function(e){//取消移動（這里是對菜單按鈕賦點擊事件，取消監聽事件用removeEventListener）
e.preventDefault();
document.getElementById('div1').addEventListener('touchend',function(e){location.href="url1";});
document.getElementById('div2').addEventListener('touchend',function(e){location.href="url2";});
document.getElementById('div3').addEventListener('touchend',function(e){location.href="url3";});
});
if(flag == 0){
//寫菜單的邏輯

var num = $('#xuanfu').css('left').substr(0,$('#xuanfu').css('left').length-2);
if($('.xf-div').css('display')=='block'){
if(num<window.innerWidth/2){
$('#div1').animate({left:"10px",top:"10px"},300) ;
$('#div2').animate({left:"10px"},300) ;
$('#div3').animate({left:'10px',top:"10px"},300) ;
}else{
$('#div1').animate({right:"10px",top:"10px",},300) ;
$('#div2').animate({right:"10px"},300) ;
$('#div3').animate({right:'10px',top:"10px"},300) ;
}
setTimeout(function(){$('.xf-div').hide();},300);
}else{
if(num<window.innerWidth/2){
$('#xuanfu').html('<p class="sup">快速問診<a class="yuan" style="bottom:45px;">0</a></p>'+
'<p class="xf-div" id="div1" style="background:linear-gradient(90deg,rgba(130,174,253,1),rgba(90,140,239,1));">1<a class="yuan">0</a></p>'+
'<p class="xf-div" id="div2" style="background:linear-gradient(90deg,rgba(176,147,252,1),rgba(132,95,223,1));">2<a class="yuan">0</a></p>'+
'<p class="xf-div" id="div3" style="background:linear-gradient(90deg,rgba(98,232,176,1),rgba(67,211,151,1));">3<a class="yuan">0</a></p>');
$('#div1').animate({left:"40px",bottom:"80px",},300) ;
$('#div2').animate({left:"85px"},300) ;
$('#div3').animate({left:'40px',top:"80px"},300) ;
}else{
$('#xuanfu').html('<p class="sup">快速問診<a class="yuan" style="bottom:45px;">0</a></p>'+
'<p class="xf-div" id="div1" style="background:linear-gradient(90deg,rgba(130,174,253,1),rgba(90,140,239,1));">1<a class="yuan">0</a></p>'+
'<p class="xf-div" id="div2" style="background:linear-gradient(90deg,rgba(176,147,252,1),rgba(132,95,223,1));">2<a class="yuan">0</a></p>'+
'<p class="xf-div" id="div3" style="background:linear-gradient(90deg,rgba(98,232,176,1),rgba(67,211,151,1));">3<a class="yuan">0</a></p>');
$('#div1').animate({right:"40px",bottom:"80px",},300) ;
$('#div2').animate({right:"85px"},300) ;
$('#div3').animate({right:'40px',top:"80px"},300) ;
}
$('.xf-div').show();
}
}
}
//從緩存中獲取最后移動的位置並添加屬性
var localmoveX = localStorage.getItem('moveX');
var localmoveY = localStorage.getItem('moveY');
if(''!=localmoveX && null!=localmoveX){
$('#xuanfu').css('left',localmoveX);
}
if(''!=localmoveY && null!=localmoveY){
$('#xuanfu').css('top',localmoveY);
}


--------html---------
<div>
<div id="xuanfu" class="xuanfu">
<p class="sup">懸浮球<a class="yuan"style="bottom:45px;">0</a></p>
<p class="xf-div" id="div1" style="background:linear-gradient(90deg,rgba(130,174,253,1),rgba(90,140,239,1));">電話</p>
<p class="xf-div" id="div2" style="background:linear-gradient(90deg,rgba(176,147,252,1),rgba(132,95,223,1));">圖文</p>
<p class="xf-div" id="div3" style="background:linear-gradient(90deg,rgba(98,232,176,1),rgba(67,211,151,1));">視頻</p>
</div>
</div>
---------css----------
.sup{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 99999;
}
.xuanfu{
position: fixed;
bottom: 15%;
right: 5%;
width: 70px;
height: 70px;
font-size: 17px;
color: #fff;
font-weight: bold;
border-radius: 50%;
/* background-color: #5e4dfe; rgba(0,0,0,0.5) */
background:rgba(94,77,254,1);
box-shadow:0px 0px 27px 0px rgba(16,0,169,0.66);
border: none;
z-index: 99998;
text-align: center;
line-height: 25px;
display:none;
}
.xf-div{
position: absolute;
bottom: 10px;
right: 10px;
width: 50px;
height: 50px;
font-size: 16px;
color: #fff;
font-weight: bold;
border-radius: 50%;
background-color: rgba(0,0,0,0.5);
border: none;
z-index: 99997;
text-align: center;
line-height: 50px;
display: none;
}

.yuan {
padding: .15em .4em;
border-radius: 18px;
background-color: #F43530;
color: #FFFFFF;
line-height: 1.2em;
text-align: center;
font-size: 12px;
vertical-align: middle;
position: absolute;
bottom: 35px;
display:none;
}

懸浮代碼采用別人的知識來借鑒，添加了懸浮菜單，若有不當之處還請指出。