手机html端悬浮球,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

$('#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

$('#xuanfu').html('

快速问诊0

'+

'

10

'+

'

20

'+

'

30

');

$('#div1').animate({left:"40px",bottom:"80px",},300) ;

$('#div2').animate({left:"85px"},300) ;

$('#div3').animate({left:'40px',top:"80px"},300) ;

}else{

$('#xuanfu').html('

快速问诊0

'+

'

10

'+

'

20

'+

'

30

');

$('#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---------

悬浮球0

电话

图文

视频

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

}

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