JavaScript implementa botões virtuais flutuantes da maçã
Basta apresentar o código à página
Existem alguns códigos redundantes, e aqueles que estão interessados podem modificá -los você mesmo.
Se houver algum bug, lembre -se de comentar e me diga
web-touch.js
var new_element_n = document.createElement ("estilo"); new_element_n.innerhtml = '#drager {' + 'posição: corrigido;' + 'Largura: 35px;' + 'altura: 35px;' + 'cor de fundo: rgba (0, 0, 0, 0.2);' + 'Z-Index: 10000;' + 'Cursor: ponteiro;' + 'topo: 0px;' + 'esquerda: 0px;' + 'Radio de fronteira: 30%;' + 'preenchimento: 6px;' + '}' + '' + '#drager> div {' + '-radius de fronteira: 50%;' + 'largura: 100%;' + 'altura: 100%;' + 'cor de fundo: rgba (0, 0, 0, 0,3);' + 'transição: todos 0.2s;' + '-moz -transição: todos 0.2s;' + '-o -transição: todos 0.2s;' + '}' + '#drager: hover> div {' + 'cor de fundo: 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 () // Cole automaticamente na posição mais próxima quando lançado {document.onMouseMove = null; if ((parseInt (fdiv.style.top)+parseint (fdiv.clientHeight)/2) <= (screenHeight/2)) {// na parte superior se ((parseint (fdiv.style.left)+parseint (fdiv.clientwidth)/2) <(() if ((parseint (fdiv.style.top)+parseint (fdiv.clientHeight)/2) <= (parseint (fdiv.style.left)+parseInt (fdiv.clientwidth)/2)) {// próximo à parte superior fdiv.style.top = "0"; } else {// próximo ao fdiv.style.left = "0px"; }} else {// na metade direita if ((parseint (fdiv.style.top)+parseint (fdiv.clientHeight)/2) <= (screenwidth- (parseint (fdiv.style.left)+parseint (fdiv.cientwidth)/2)) { } else {// próximo à direita fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth))+"px"; }}} else {// a metade inferior do if ((parseint (fdiv.style.left)+parseint (fdiv.clientwidth)/2) <= (screenwidth/2)) {// na metade esquerda do if (if ( (ScreenHeight- (parseint (fdiv.style.top)+parseint (fdiv.clientHeight)/2)) <= (parseint (fdiv.style.left)+parseint (fdiv.clientwidth)/2)) {// próximo à parte inferior da parte inferior do fdiv.style.top = (ScreenHeight-Parseint (fdiv.clientHeight))+"px"; } else {// próximo ao fdiv.style.left = "0px"; }} else {// na metade direita if ((screenHeight- (parseint (fdiv.style.top)+parseint (fdiv.clientHeight)/2)) <= (screenwidth- (parseint (fdiv.style.left)+parseint (the fdiv.clientwidth)/2)/2)/ fdiv.style.top = (ScreenHeight-Parseint (fdiv.clientHeight))+"px"; } else {// próximo à direita fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth))+"px"; }}}} função mouseMove (ev) {if (ev == null) {ev = window.event;} // ie if ((ev.clienty - posy) <= 0) {// mais do que o top fdiv.style.top = "0px"; } else if ((ev.clienty-posy)> (screenHeight-parseint (fdiv.clientHeight))) {// sobre o fundo fdiv.style.top = (ScreenHeight-parseInt (fdiv.clientHeight))+"px"; } else {fdiv.style.top = (ev.clienty - posy) + "px"; } if ((ev.clientx- Posx) <= 0) {// sobre o esquerdo fdiv.style.left = "0px"; } else if ((ev.clientX-Posx)> (ScreenWidth-ParseInt (fdiv.clientWidth))) {// sobre o direito direito 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 () {// Tamanho da janela Altere a tela do evento WELWIDTH = document.documentElement.clientWidth; ScreenHeight = document.documentElement.clientHeight; if ((parseint (fdiv.style.top)+parseint (fdiv.clientHeight))> screenHeight) {// A janela altera a parte além da adaptação fdiv.style.top = (ScreenHeight-parseInt (fdiv.clientHeight)+"px"; } if ((parseInt (fdiv.style.left)+parseint (fdiv.clientwidth))> largura de tela) {// a janela altera a parte além da adaptação fdiv.style.left = (screenwidth-parseint (fdiv.clientwidthth)+"px"; } document.onmouseup.apply ()}; fdiv.addeventListener ('touchstart', fdiv.onmousedown, falso); fdiv.adDeventListener ('touchmove', function (event) {// se houver apenas um dedo na posição desse elemento if (event.targetTouches.length == 1) {event.PreventDefault (); // bloquear o Browser default Event, importante Touch = Event.TargetToodes [0]; fdiv.style.top = "0px"; (Touch.Pagey-Parseint (fdiv.clientHeight)/2) + "px"; fdiv.style.left = (ScreenWidth-ParseInt (fdiv.clientwidth)) + "px"; fdiv.addeventListener ('Toukend', document.onmouseup, false); fdiv.ondblClick = function () {// Evento de clique duplo pode entrar em conflito com o evento de escala da página da web no alerta do navegador móvel ("Play Your Imagination"); }html
<! doctype html> <html> <head> <meta charset = "utf-8"> <titter>
Diagrama de demonstração