JavaScript implémente les boutons virtuels flottants Apple
Introduisez simplement le code sur la page
Il y a des codes redondants, et ceux qui sont intéressés peuvent les modifier vous-même.
S'il y a un bug, n'oubliez pas de commenter et de me dire
web-touch.js
var new_element_n = document.createElement ("style"); new_element_n.innerhtml = '#drager {' + 'position: fixe;' + 'Largeur: 35px;' + 'hauteur: 35px;' + 'Background-Color: rgba (0, 0, 0, 0,2);' + 'z-index: 10000;' + 'curseur: pointeur;' + 'TOP: 0px;' + 'gauche: 0px;' + 'Border-Radius: 30%;' + «rembourrage: 6px; + '}' + '' + '#drager> div {' + 'border-radius: 50%;' + 'Largeur: 100%;' + 'Hauteur: 100%;' + 'Background-Color: rgba (0, 0, 0, 0,3);' + «Transition: tous 0,2 s; + '-moz-transition: tous 0,2 s;' + '-o-transition: tous 0,2 s;' + '}' + '#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 = mousmove; } document.onMouseUp = function () // Collez automatiquement à la position la plus proche lors de la publication {document.onMouseMove = null; if ((parseInt (fdiv.style.top) + parseInt (fdiv.clientHeight) / 2) <= (screenheight / 2)) {// dans la partie supérieure if ((parseInt (fdiv.style.left) + parseint (fdiv.clientwidth) / 2) <= (screenwidth / 2)) {// dans la partie gauche) if ((parseInt (fdiv.style.top) + parseInt (fdiv.clientHeight) / 2) <= (parseInt (fdiv.style.left) + parseInt (fdiv.clientwidth) / 2)) {// près du partiic supérieur fdiv.style.top = "0px"; } else {// près de la gauche fdiv.style.left = "0px"; }} else {// dans la moitié droite if ((parseInt (fdiv.style.top) + parseInt (fdiv.clientheight) / 2) <= (screenwidth- (parseint (fdiv.style.left) + parseint (fdiv.clientwidth) / 2)) {// près du top fdiv.style.top = "0px; } else {// près de la droite fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth)) + "px"; }}} else {// la moitié inférieure de if ((parseInt (fdiv.style.left) + parseInt (fdiv.clientwidth) / 2) <= (screenwidth / 2)) {// dans la moitié gauche du if ( (ScreenHeight- (paSeInt (fdiv.style.top) + parseInt (fdiv.clientHeight) / 2)) <= (parseInt (fdiv.style.left) + parseInt (fdiv.clientwidth) / 2)) {// près de la partie inférieure de la partie inférieure de la partie inférieure de la partie inférieure de la partie inférieure de la partie inférieure de la partie inférieure de la fdiv.style.top = (ScreenHeight-Parseint (fdiv.clientHeight)) + "px"; } else {// près de la gauche fdiv.style.left = "0px"; }} else {// dans la bonne moitié if ((screenHeight- (paSeInt (fdiv.style.top) + parseInt (fdiv.clientheight) / 2)) <= (screenwidth- (parseInt fdiv.style.top = (ScreenHeight-Parseint (fdiv.clientHeight)) + "px"; } else {// près de la droite fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth)) + "px"; }}}} fonction mousmove (ev) {if (ev == null) {ev = window.event;} // ie if ((ev.clienty - posy) <= 0) {// plus que le top fdiv.style.top = "0px"; } else if ((ev.clienty - Posy)> (screenHeight-parseInt (fdiv.clientHeight))) {// sur le bas fdiv.style.top = (screenheight-parseint (fdiv.clientheight)) + "px"; } else {fdiv.style.top = (ev.clienty - posy) + "px"; } if ((ev.clientx- posx) <= 0) {// sur la gauche fdiv.style.left = "0px"; } else if ((ev.clientx - posx)> (screenwidth-parentIint (fdiv.clientwidth))) {// sur le droit 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 () {// Taille de la fenêtre Modifiez l'événement screenwidth = document.DocumentElement.ClientWidth; ScreenHeight = document.DocumentElement.ClientHeight; if ((parseInt (fdiv.style.top) + parseInt (fdiv.clientHeight))> screenHeight) {// La fenêtre modifie la pièce au-delà de l'adaptation fdiv.style.top = (screenheight-pateint (fdiv.clientHeight)) + "px"; } if ((parseInt (fdiv.style.left) + parseInt (fdiv.clientwidth))> screenwidth) {// La fenêtre modifie la pièce au-delà de l'adaptation fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth)) + "px"; } document.onmouseup.apply ()}; fdiv.addeventListener ('Touchstart', fdiv.onmousedown, false); fdiv.addeventListener ('TouchMove', fonction (événement) {// s'il n'y a qu'un seul doigt dans la position de cet élément if (event.targetouches.length == 1) {event.PreventDefault (); // bloquez l'événement par défaut du navigateur, important var touch = event.targetTouches [0]; if (Touch.pagey) <= 0) fdiv.style.top = "0px";} else if (Touch.Pagey> (screenHeight-Parseint (fdiv.clientHeight)) {// sur le bas fdiv.style.top = (screenHeight-parseint (fdiv.style.top = "px"; (Touch.Pagey-Parseint (fdiv.clientHeight) / 2) + "PX";} if (Touch.Pagex <= 0) {// sur le gauche fdiv.style.left = "0px"; fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth)) + "px";} else {fdiv.style.left = (Touch.Pagex-Parseint (fdiv.clientwidth) / 2) + "px"; fdiv.addeventListener («Touchend», document.onmouseup, false); fdiv.ondblclick = function () {// L'événement à double clic peut entrer en conflit avec l'événement de mise à l'échelle de la page Web dans l'alerte du navigateur mobile ("Play Your Imagination"); }html
<! doctype html> <html> <éadf> <meta charset = "utf-8"> <t titre> Document </tapt> </ head> <body> </ body> <script src = "web-touch.js" type = "text / javascript"> </ script> </html>
Diagramme de démonstration