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=doc