Javascript tips for implementing Apple's floating virtual button _ javascript

This article will share with you how to use javascript to simulate the code of Apple's floating virtual button. It is very simple. I will give you a thought and you can freely scale it according to your own situation. Implement Apple floating virtual buttons using Javascript

Directly introduce the code to the page.
The code is partially redundant. You can modify the code by yourself if you are interested.
If you have any bugs, remember to comment and tell me.

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> p {'+ 'border-radius: 50%;' + 'width: 100%; '+ 'height: 100%; '+ 'background-color: rgba (0, 0, 0, 0.3);' + 'transition: all 0.2 s; '+'-webkit-transition: all 0.2 s; '+'-moz-transition: all 0.2 s; '+'-o-transition: all 0.2 s; '+'} '+' # drager: hover> p {'+ 'background-color: rgba (0, 0, 0, 0.6);' + '}'; document. body. appendChild (new_element_N); new_element_N = document. createElement ('P'); new_element_N.setAttribute ("id", "drager"); identifier = "100px"; new_element_N.style.left = "100px"; new_element_N.innerHTML ='
'; Document. body. appendChild (new_element_N); // var posX; var posY; var screenWidth using document.doc umentElement. clientWidth; var screenHeight = document.doc umentElement. clientHeight; var fp = document. getElementById ("drager"); fp. onmousedown = function (e) {screenWidth upload document.doc umentElement. clientWidth; screenHeight = document.doc umentElement. clientHeight; if (! E) {e = window. event;} // IE posX = e. clientX-parseInt (fp. style. left); posY = e. clientY-parseInt (fp. style. top); document. onmousemove = mousemove;} document. onmouseup = function () // automatically attaches to the nearest position {document. onmousemove = null; if (parseInt (fp. style. top) + parseInt (fp. clientHeight)/2) <= (screenHeight/2) {// if (parseInt (fp. style. left) + parseInt (fp. clientWidth)/2) <= (screenWidth/2) {// if (parseInt (fp. style. top) + parseInt (fp. clientHeight)/2) <= (parseInt (fp. style. left) + parseInt (fp. clientWidth)/2) {// close to the top fp. style. top = "0px";} else {// close to the left fp. style. left = "0px" ;}} else {// if (parseInt (fp. style. top) + parseInt (fp. clientHeight)/2) <= (screenWidth-(parseInt (fp. style. left) + parseInt (fp. clientWidth)/2) {// close to the top fp. style. top = "0px";} else {// close to fp on the right. style. left = (screenWidth-parseInt (fp. clientWidth) + "px" ;}}} else {// lower half if (parseInt (fp. style. left) + parseInt (fp. clientWidth)/2) <= (screenWidth/2) {// if (screenHeight-(parseInt (fp. style. top) + parseInt (fp. clientHeight)/2) <= (parseInt (fp. style. left) + parseInt (fp. clientWidth)/2) {// close to the fp below. style. top = (screenHeight-parseInt (fp. clientHeight) + "px";} else {// close to the left fp. style. left = "0px" ;}} else {// if (screenHeight-(parseInt (fp. style. top) + parseInt (fp. clientHeight)/2) <= (screenWidth-(parseInt (fp. style. left) + parseInt (fp. clientWidth)/2) {// close to the top fp. style. top = (screenHeight-parseInt (fp. clientHeight) + "px";} else {// close to fp on the right. style. left = (screenWidth-parseInt (fp. clientWidth) + "px" ;}}} function mousemove (ev) {if (ev = null) {ev = window. event;} // IE if (ev. clientY-posY) <= 0) {// exceeds the top fp. style. top = "0px";} else if (ev. clientY-posY)> (screenHeight-parseInt (fp. clientHeight) {// exceeds the bottom fp. style. top = (screenHeight-parseInt (fp. clientHeight) + "px";} else {fp. style. top = (ev. clientY-posY) + "px";} if (ev. clientX-posX) <= 0) {// exceeds the left fp. style. left = "0px";} else if (ev. clientX-posX)> (screenWidth-parseInt (fp. clientWidth) {// exceeds the right fp. style. left = (screenWidth-parseInt (fp. clientWidth) + "px";} else {fp. style. left = (ev. clientX-posX) + "px";} // console. log (posX + "" + fp. style. left);} window. onload = window. onresize = function () {// window size change event screenWidth upload document.doc umentElement. clientWidth; screenHeight = document.doc umentElement. clientHeight; if (parseInt (fp. style. top) + parseInt (fp. clientHeight)> screenHeight) {// adjust the window to fit the excess fp. style. top = (screenHeight-parseInt (fp. clientHeight) + "px";} if (parseInt (fp. style. left) + parseInt (fp. clientWidth)> screenWidth) {// adjust the window to fit the excess fp. style. left = (screenWidth-parseInt (fp. clientWidth) + "px";} document. onmouseup. apply ()}; fp. addEventListener ('touchstart', fp. onmousedown, false); fp. addEventListener ('touchmove ', function (event) {// if this element has only one finger, if (event.tar getTouches. length = 1) {event. preventDefault (); // block the default events of the browser. Important: var touch = event.tar getTouches [0]; if (touch. pageY) <= 0) {// exceeds the top fp. style. top = "0px";} else if (touch. pageY> (screenHeight-parseInt (fp. clientHeight) {// exceeds the bottom fp. style. top = (screenHeight-parseInt (fp. clientHeight) + "px";} else {fp. style. top = (touch. pageY-parseInt (fp. clientHeight)/2) + "px";} if (touch. pageX <= 0) {// exceeds the left fp. style. left = "0px";} else if (touch. pageX> (screenWidth-parseInt (fp. clientWidth) {// exceeds the right fp. style. left = (screenWidth-parseInt (fp. clientWidth) + "px";} else {fp. style. left = (touch. pageX-parseInt (fp. clientWidth)/2) + "px" ;}}, false); fp. addEventListener ('touchend', document. onmouseup, false); fp. ondblclick = function () {// The double-click event may conflict with the webpage scaling event in the mobile browser ("Use your imagination ");}

Html

  
   Document