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>
デモ図