JavaScriptは、Appleフローティング仮想ボタンを実装します
ページにコードを紹介するだけです
いくつかの冗長コードがあり、興味のある人は自分でそれらを変更できます。
バグがある場合は、コメントして教えてください
web-touch.js
var new_element_n = document.createelement（ "style"）; new_element_n.innerhtml = '#drager {' + 'position：sixt;' + '幅：35px;' + 'height：35px;' + 'background-color：rgba（0、0、0、0.2）;' + 'z-index：10000;' + 'カーソル：ポインター;' + 'Top：0px;' + '左：0px;' + 'Border-Radius：30％;' + 'パディング：6px;' + '}' + '' + '#drager> div {' + 'border-radius：50％;' + '幅：100％;' + '高さ：100％;' + 'background-color：rgba（0、0、0、0.3）;' + '遷移：すべて0.2S;' + '-moz -transition：すべて0.2s;' + '-o -transition：すべて0.2S;' + '}' + '#drager：hover> div {' + 'background-color：rgba（0、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）<=（parseint-（fdiv.style.left）+parseint（fdiv.clientwidth）/2））） } else {//右のfdiv.style.left =（screenwidth-parseint（fdiv.clientwidth））+"px"; }}} else {// if（（parseint（fdiv.style.left）+parseint（fdiv.clientwidth）/2）<=（screenWidth/2））{// ifの左半分の（fdiv.clientwidth）/2）の下半分（screenheight-（parseint（fdiv.style.top）+parseint（fdiv.clientheight）/2）））） fdiv.style.top =（screenheight-parseint（fdiv.clientheight））+"px"; } else {//左の近くのfdiv.style.left = "0px"; }} else {//右半分のif（（screenheight-（fdiv.style.top）+parseint（fdiv.clientheight）/2）/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）））{// } else {fdiv.style.left =（ev.clientx -posx） + "px"; } // console.log（posx + "" + fdiv.style.left）; } window.onload = window.onresize = function（）{// window sizeイベント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）{//この要素の位置に1本の指のみがある場合（event.targettouch.length.length.length.preventdefault（）; //ブラウザのデフォルトイベント、重要なvar touch = event.targetouches [0）; fdiv.style.top = "0px"; else if（screenheight-parseint（fdiv.clientheight））{// （touch.pagey-parseint（fdiv.clientheight）/2） + "px"; fdiv.style.left =（fdiv.clientwidth） + "px"; fdiv.addeventlistener（ 'touchend'、document.onmouseup、false）; fdiv.ondblclick = function（）{//ダブルクリックイベントは、モバイルブラウザーアラートでのWebページスケーリングイベントと競合する可能性があります（ "your yuy imagination"）; }HTML
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> document> document> document> document> document> </head> </head> <body> </body> <script src = "web-touch.js" type = "text/javascript"> </script> </html>
デモ図