HTML页面悬浮球,转载js可拖拽悬浮球特效

标签：

这是一个常见的案例，在写移动端的时候。很多网站APP 都会有类似手机的悬浮球，可以在界面上随意拖动，然后点开就是一个连接，效果图如下

 

图中有一个客服的悬浮球点击是一个窗口连接，可以随意滑动，代码如下

Title

.div{

width: 100px;

height: 50px;

position:fixed;

background-color: red;

border-radius:25px;

}

window.οnlοad=function(){

var flag = 0; //标记是拖曳还是点击

var oDiv = document.getElementById('div');

var disX,moveX,L,T,starX,starY,starXEnd,starYEnd;

oDiv.addEventListener('touchstart',function(e){

flag = 0;

e.preventDefault();//阻止触摸时页面的滚动，缩放

disX = e.touches[0].clientX - this.offsetLeft;

disY = e.touches[0].clientY - this.