Javascript實現蘋果懸浮虛擬按鈕
直接引入代碼到頁面即可
代碼有部分冗餘的地方,有興趣的小伙伴可也自己修改
如果有什麼BUG 記得評論告訴我哦
web-touch.js
var new_element_N=document.createElement("style"); new_element_N.innerHTML = '#drager {' + ' position: fixed;' + ' width: 35px;' + ' height: 35px;' + ' background-color: rgba(0, 0, 0, 0.2);' + ' z-index: 10000;' + ' cursor: pointer;' + ' top: 0px;' + ' left: 0px;' + ' border-radius: 30%;' + ' padding: 6px;' + ' }' + ' ' + ' #drager>div {' + ' border-radius: 50%;' + ' width: 100%;' + ' height: 100%;' + ' background-color: rgba(0, 0, 0, 0.3);' + ' transition: all 0.2s;' + ' -webkit-transition: all 0.2s;' + ' -moz-transition: all 0.2s;' + ' -o-transition: all 0.2s;' + ' }' + ' #drager:hover>div{' + ' background-color: rgba(0, 0, 0, 0.6);' + ' } '; document.body.appendChild(new_element_N); new_element_N=document.createElement('div'); new_element_N.setAttribute("id","drager"); new_element_N.style.top="100px"; new_element_N.style.left="100px"; new_element_N.innerHTML = ' <div></div>' ; document.body.appendChild(new_element_N); // // var posX; var posY; var screenWidth =document.documentElement.clientWidth; var screenHeight = document.documentElement.clientHeight; var fdiv = document.getElementById("drager"); fdiv.onmousedown=function(e) { screenWidth =document.documentElement.clientWidth; screenHeight = document.documentElement.clientHeight; if(!e){ e = window.event; } //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - parseInt(fdiv.style.top); document.onmousemove = mousemove; } document.onmouseup = function()//釋放時自動貼到最近位置{ document.onmousemove = null; if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(screenHeight/2)){//在上半部分if((parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)<=(screenWidth/2)){//在左半部分if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)){//靠近上方fdiv.style.top="0px"; }else{//靠近左邊fdiv.style.left="0px"; } }else{//在右半部分if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//靠近上方fdiv.style.top="0px"; }else{//靠近右邊fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px"; } } }else{ //下半部分if((parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)<=(screenWidth/2)){//在左半部分if( (screenHeight-(parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2))<=(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)){//靠近下方fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; }else{//靠近左邊fdiv.style.left="0px"; } }else{//在右半部分if( (screenHeight-(parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2))<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//靠近上方fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; }else{//靠近右邊fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px"; } } } } function mousemove(ev) { if(ev==null){ ev = window.event;}//IE if((ev.clientY - posY)<=0){//超過頂部fdiv.style.top="0px"; }else if((ev.clientY - posY) >(screenHeight-parseInt(fdiv.clientHeight))){//超過底部fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; }else{ fdiv.style.top = (ev.clientY - posY) + "px"; } if((ev.clientX- posX)<=0){//超過左邊fdiv.style.left="0px"; }else if((ev.clientX - posX) >(screenWidth-parseInt(fdiv.clientWidth))){//超過右邊fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px"; }else{ fdiv.style.left = (ev.clientX - posX) + "px"; } // console.log( posX +" "+ fdiv.style.left); } window.onload = window.onresize = function() { //窗口大小改變事件screenWidth =document.documentElement.clientWidth; screenHeight = document.documentElement.clientHeight; if( (parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight))>screenHeight){//窗口改變適應超出的部分fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; } if( (parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth))>screenWidth){//窗口改變適應超出的部分fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px"; } document.onmouseup.apply() }; fdiv.addEventListener('touchstart', fdiv.onmousedown, false); fdiv.addEventListener('touchmove', function(event) { // 如果這個元素的位置內只有一個手指的話if (event.targetTouches.length == 1) { event.preventDefault();// 阻止瀏覽器默認事件，重要var touch = event.targetTouches[0]; if((touch.pageY)<=0){//超過頂部fdiv.style.top="0px"; }else if(touch.pageY>(screenHeight-parseInt(fdiv.clientHeight))){//超過底部fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; }else{ fdiv.style.top = (touch.pageY-parseInt(fdiv.clientHeight)/2) + "px"; } if(touch.pageX<=0){//超過左邊fdiv.style.left="0px"; }else if( touch.pageX >(screenWidth-parseInt(fdiv.clientWidth))){//超過右邊fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px"; }else{ fdiv.style.left = (touch.pageX-parseInt(fdiv.clientWidth)/2) + "px"; } } }, false); fdiv.addEventListener('touchend', document.onmouseup , false); fdiv.ondblclick=function(){//雙擊事件可能在手機端瀏覽器會與網頁縮放事件衝突alert("發揮你們的想像力吧"); }html
<!doctype html><html ><head> <meta charset="UTF-8"> <title>Document</title> </head><body> </body><script src="web-touch.js" type="text/javascript"></script></html>
演示圖