JavaScript реализует Apple плавающие виртуальные кнопки
Просто представьте код на странице
Есть некоторые избыточные коды, и те, кто заинтересован, могут изменить их самостоятельно.
Если есть ошибка, не забудьте прокомментировать и сказать мне
web-touch.js
var new_element_n = document.createElement ("style"); new_element_n.innerhtml = '#drager {' + 'position: fixed;' + 'ширина: 35px;' + 'Высота: 35px;' + 'фоновый цвет: rgba (0, 0, 0, 0,2);' + 'z-index: 10000;' + 'cursor: pointer;' + 'top: 0px;' + 'слева: 0px;' + 'граница-радий: 30%;' + 'Padding: 6px;' + '}' + '' + '#drager> div {' + 'Border-Radius: 50%;' + 'ширина: 100%;' + 'Высота: 100%;' + 'фоновый цвет: rgba (0, 0, 0, 0,3);' + 'Переход: все 0,2 с;' + '-мос -транзиция: все 0,2 с;' + '-o -transition: все 0,2 с;' + '}' + '#Drager: Hover> div {' + 'фоновое цветное: 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; } // т.е. 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) {//in the Left partidth)/2) <= (screenwidth/2) {//{//in the Left partiDth)/2) <= (screenwidth/2)) {//in the Left partiDth) <= (Screenwidth/2) {//in the LeftWidth)/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) <= (screenwidth- (parseint (fdiv.style.left)+parseint (fdiv.clientwidth)/2))) {/roop.sty.sty. } else {// рядом с правым fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth))+"px"; }}} else {// нижняя половина if ((parseint (fdiv.style.left)+parseint (fdiv.clientwidth)/2) <= (screenwidth/2)) {// в левой половине if ( (ScreenHeight- (parseint (fdiv.style.top)+parseint (fdiv.clientHeight)/2)) <= (parseint (fdiv.style.left)+parseint (fdiv.clientWidth)/2) {// рядом нижней части fdiv.style.top = (ScreenHeight Parseint (fdiv.clientHeight))+"px"; } else {// рядом с левым fdiv.style.left = "0px"; }} else {// в правой половине if if (((screenHeight- (parseint (fdiv.style.top)+parseint (fdiv.clientheight)/2)) <= (screenwidth- (parseint (fdiv.style.left)+parseint (fdiv.clientwidth)/2)) {//{//{//top top). 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))) {// над правой 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 () {// Размер окна изменение экрана 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) {// Если есть только один палец в положении этого элемента if (event.targettouches.length == 1) {event.preventDefault (); // блокировать событие по умолчанию Brower, VAGTER TOUCK = EVARGETTUCHES [0]; fdiv.style.top = "0px"; (touch.pagey-parseint (fdiv.clientheight)/2) + "px"; fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth)) + "px"; fdiv.addeventlistener ('touckend', document.onmouseup, false); fdiv.ondblclick = function () {// Событие с двойным щелчком может противоречить событию масштабирования веб-страниц в мобильном браузере Alert («Играйте в свое воображение»); }HTML
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> документ </title> </head> <body> </body> <script src = "web-touch.js" type = "text/javascript"> </script> </html>
Демо -диаграмма