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('快速问诊<a class="yuan" style="bottom:45px;">0</a>'+
'1<a class="yuan">0</a>'+
'2<a class="yuan">0</a>'+
'3<a class="yuan">0</a>');
$('#div1').animate({left:"40px",bottom:"80px",},300) ;
$('#div2').animate({left:"85px"},300) ;
$('#div3').animate({left:'40px',top:"80px"},300) ;
}else{
$('#xuanfu').html('快速问诊<a class="yuan" style="bottom:45px;">0</a>'+
'1<a class="yuan">0</a>'+
'2<a class="yuan">0</a>'+
'3<a class="yuan">0</a>');
$('#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">
悬浮球<a class="yuan"style="bottom:45px;">0</a>
电话
图文
视频
</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;
}

悬浮代码采用别人的知识来借鉴，添加了悬浮菜单，若有不当之处还请指出。

posted @ 2019-06-04 17:43 tongCB 阅读(1015) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

html滑动仿悬浮球菜单

公告