JavaScript implementa botones virtuales flotantes de Apple
Simplemente introduzca el código en la página
Hay algunos códigos redundantes, y aquellos que están interesados pueden modificarlos usted mismo.
Si hay algún error, recuerde comentar y decirme
web-touch.js
var new_element_n = document.createElement ("estilo"); new_element_n.innerhtml = '#drager {' + 'posición: fijo;' + 'Ancho: 35px;' + 'Altura: 35px;' + 'Color de fondo: RGBA (0, 0, 0, 0.2);' + 'Z-índice: 10000;' + 'cursor: puntero;' + 'arriba: 0px;' + 'izquierda: 0px;' + 'Border-Radius: 30%;' + 'Pading: 6px;' + '}' + '' + '#Drager> div {' + 'border-radio: 50%;' + 'Ancho: 100%;' + 'Altura: 100%;' + 'Color de fondo: RGBA (0, 0, 0, 0.3);' + 'Transición: todos 0.2s;' + '-Moz -Transition: todos 0.2s;' + '-o -transición: todos 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); documento.onmousemove = mouseMove; } document.onmouseUp = function () // Pegar automático a la posición más cercana cuando se libera {document.onmouseMove = null; if ((parseInt (fdiv.style.top)+parseInt (fdiv.clientheight)/2) <= (screenHeight/2)) {// en la parte superior if ((parseInt (fdiv.style.left)+parseint (fdiv.clientwidth)/2) <= (screenwidth/2)) {// en la parte izquierda if ((parseInt (fdiv.style.top)+parseInt (fdiv.clientheight)/2) <= (parseInt (fdiv.style.left)+parseint (fdiv.clientwidth)/2)) {// cerca de la parte superior fdiv.style.top = "0px"; } else {// cerca de la izquierda fdiv.style.left = "0px"; }} else {// en la mitad derecha if ((parseInt (fdiv.style.top)+parseInt (fdiv.clientheight)/2) <= (screenwidth- (parseInt (fdiv.style.left)+parseint (fdiv.clientwidth)/2)) {// cerca de la parte superior fdiv.stytyle.tyle 0p. } else {// cerca de la derecha fdiv.style.left = (screenwidth-parseInt (fdiv.clientwidth))+"px"; }}} else {// La mitad inferior del if ((parseInt (fdiv.style.left)+parseInt (fdiv.clientwidth)/2) <= (screenwidth/2)) {// en la mitad izquierda del if (( (ScreenHeight- (parseInt (fdiv.style.top)+parseInt (fdiv.clientheight)/2)) <= (parseint (fdiv.style.left)+parseint (fdiv.clientwidth)/2)) {// cerca de la parte inferior de la parte de la fdiv.style.top = (screenHeight-parseInt (fdiv.clientHeight))+"px"; } else {// cerca de la izquierda fdiv.style.left = "0px"; }} else {// en la mitad derecha if ((screenHeight- (parseInt (fdiv.style.top)+parseInt (fdiv.clientheight)/2)) <= (screenwidth- (parseInt (fdiv.style.left)+parseint (fdiv.clientwidth)/2))) {// cerca de la parte superior fdiv.style.top = (screenHeight-parseInt (fdiv.clientHeight))+"px"; } else {// cerca de la derecha fdiv.style.left = (screenwidth-parseInt (fdiv.clientwidth))+"px"; }}}} function mouseMove (ev) {if (ev == null) {ev = window.event;} // ie if ((ev.clienty - posy) <= 0) {// más que el top fdiv.style.top = "0px"; } else if ((ev.clienty-posy)> (screenHeight-parseInt (fdiv.clientHeight))) {// sobre la parte inferior fdiv.style.top = (ScreenHeight-PARSEINT (fDiv.clientHeight))+"Px"; } else {fdiv.style.top = (ev.clienty - posy) + "px"; } if ((ev.clientx- posx) <= 0) {// sobre la izquierda fdiv.style.left = "0px"; } else if ((ev.clientx-posx)> (screenwidth-parseint (fdiv.clientwidth))) {// sobre la derecha 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 () {// Window Size Cambiar event ScreenWidth = document.DocumentElement.clientWidth; screenHeight = document.documentelement.clientHeight; if ((parseInt (fdiv.style.top)+parseInt (fdiv.clientHeight))> screenHeight) {// La ventana cambia la parte más allá de la adaptación fdiv.style.top = (screenHeight-parseint (fdiv.clientHeight)+"px"; } if ((parseInt (fdiv.style.left)+parseInt (fdiv.clientwidth))> screenwidth) {// La ventana cambia la parte más allá de la adaptación fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth))+"px"; } document.onmouseup.apply ()}; fdiv.addeventListener ('touchStart', fdiv.onmousedown, falso); fdiv.addeventListener ('touchmove', function (event) {// Si solo hay un dedo en la posición de este elemento if (event.targetTouches.length == 1) {event.preventDefault (); // bloquea el navegador predeterminado, importante touch = event.tarGetTouches [0]; if ((touch.pagey) fdiv.style.top = "0px"; (touch.pagey-parseint (fdiv.clientHeight)/2) + "px"; fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth)) + "px"; fdiv.addeventListener ('touchend', document.onmouseUp, falso); fdiv.ondblClick = function () {// El evento de doble clic puede entrar en conflicto con el evento de escala de la página web en la alerta del navegador móvil ("Reproducir su imaginación"); }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>
Diagrama de demostración