轉載js可拖拽懸浮球特效
阿新 • • 發佈：2018-12-17
這是一個常見的案例，在寫移動端的時候。很多網站APP 都會有類似手機的懸浮球，可以在介面上隨意拖動，然後點開就是一個連線，效果圖如下 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div{ width: 100px; height: 50px; position:fixed; background-color: red; border-radius:25px; } </style> </head> <body> <div class="div" id="div"></div> </body> <script> window.onload=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.offsetTop; //手指按下時的座標 starX = e.touches[0].clientX; starY = e.touches[0].clientY; //console.log(disX); }); oDiv.addEventListener('touchmove',function(e){ 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; //console.log(L); if(L<0){//限制拖拽的X範圍，不能拖出螢幕 L = 0; }else if(L > document.documentElement.clientWidth - this.offsetWidth){ L=document.documentElement.clientWidth - this.offsetWidth; } if(T<0){//限制拖拽的Y範圍，不能拖出螢幕 T=0; }else if(T>document.documentElement.clientHeight - this.offsetHeight){ T = document.documentElement.clientHeight - this.offsetHeight; } moveX = L + 'px'; moveY = T + 'px'; //console.log(moveX); this.style.left = moveX; this.style.top = moveY; }); window.addEventListener('touchend',function(e){ //alert(parseInt(moveX)) //判斷滑動方向 if(flag === 0) {//點選 window.location.href='http://www.baidu.com'; } }); } </script> </html>
程式碼可以直接引用，簡單易懂，僅僅適用於移動端。