JavaScript mengimplementasikan tombol virtual apel apel
Cukup perkenalkan kode ke halaman
Ada beberapa kode yang berlebihan, dan mereka yang tertarik dapat memodifikasinya sendiri.
Jika ada bug, harap ingat untuk berkomentar dan beri tahu saya
Web-touch.js
var new_element_n = document.createElement ("style"); new_element_n.innerHtml = '#drager {' + 'position: fixed;' + 'Lebar: 35px;' + 'Tinggi: 35px;' + 'Latar Belakang: RGBA (0, 0, 0, 0.2);' + 'z-index: 10000;' + 'kursor: pointer;' + 'TOP: 0PX;' + 'kiri: 0px;' + 'Border-Radius: 30%;' + 'padding: 6px;' + '}' + '' + '#Drager> Div {' + 'Border-Radius: 50%;' + 'Lebar: 100%;' + 'Tinggi: 100%;' + 'Latar Belakang: RGBA (0, 0, 0, 0.3);' + 'Transisi: Semua 0.2s;' + '-Moz -transisi: semua 0.2s;' + '-O -transisi: semua 0.2s;' + '}' + '#Drager: Hover> Div {' + 'Latar Belakang: 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; } // yaitu posx = e.clientx - parseInt (fdiv.style.left); posy = e.clienty - parseInt (fdiv.style.top); document.onmouseMove = mousemove; } document.onMouseUp = function () // menempel secara otomatis ke posisi terdekat saat dirilis {document.onmouseMove = null; if ((parseInt (fdiv.style.top)+parseInt (fdiv.clientHeight)/2) <= (screenheight/2)) {// di bagian atas if ((parseInt (fdiv.style.left)+parseInt (fdiv.clientwidth)/2) <= =)+parseInt (fdiv.clientwidth)/2) if ((parseInt (fdiv.style.top)+parseInt (fdiv.clientHeight)/2) <= (parseInt (fdiv.style.left)+parseInt (fdiv.clientwidth)/2)) {// dekat bagian atas fdiv.style.top = "0px)) {// dekat bagian atas fdiv.style.top =" 0px); } else {// dekat fdiv.style.left = "0px"; }} else {// Di setengah kanan if if ((parseInt (fdiv.style.top)+parseInt (fdiv.clientheight)/2) <= (screenwidth- (parseInt (fdiv.style.left)+parseInt (fdiv.clientwidth)/2)))))+parseint (fdiv.clientwidth)/2)))))))+ParseInt (fdiv.clientwidth)/2)))))) } else {// dekat fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth))+"px"; }}} else {// bagian bawah if ((parseInt (fdiv.style.left)+parseInt (fdiv.clientWidth)/2) <= (screenwidth/2)) {// Di bagian kiri if ( (screenheight- (parseInt (fdiv.style.top)+parseInt (fdiv.clientheight)/2)) <= (parseInt (fdiv.style.left)+parseint (fdiv.clientwidth)/2)) {// dekat bagian bawah dari bagian bawah dari bagian bawah fdiv.style.top = (screenheight-parseint (fdiv.clientHeight))+"px"; } else {// dekat fdiv.style.left = "0px"; }} else {// Di setengah kanan if if ((screenheight- (parseInt (fdiv.style.top)+parseInt (fdiv.clientHeight)/2)) <= (screenwidth- (parseint (fdiv.style.left)+parseint (fdiv.clientth)/2)+parseint (fdiv.clientth)/2)+parseint (fdiv.clientth)/2) fdiv.style.top = (screenheight-parseint (fdiv.clientHeight))+"px"; } else {// dekat fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth))+"px"; }}}} function mousemove (ev) {if (ev == null) {ev = window.event;} // yaitu if ((ev.clienty - posy) <= 0) {// lebih dari fdiv.style.top = "0px"; } lain if ((ev.clienty-posy)> (screenheight-parseint (fdiv.clientHeight))) {// di atas fdiv.style.top = (screenheight-parseint (fdiv.clientheight))+"px"; } else {fdiv.style.top = (ev.clienty - posy) + "px"; } if ((ev.clientx- posx) <= 0) {// di atas fdiv.style.left = "0px"; } lain jika ((ev.clientx-posx)> (screenwidth-parseint (fdiv.clientwidth))) {// di atas 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 () {// size window Ubah event screenwidth = document.documentelement.clientwidth; screenheight = document.documentelement.clientHeight; if ((parseInt (fdiv.style.top)+parseInt (fdiv.clientHeight))> screenheight) {// Jendela mengubah bagian di luar adaptasi fdiv.style.top = (screenheight-parseint (fdiv.clientheight))+"px"; } if ((parseInt (fdiv.style.left)+parseInt (fdiv.clientWidth))> screenwidth) {// Jendela mengubah bagian di luar adaptasi fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth))+"px"; } document.onmouseUp.Apply ()}; fdiv.addeventlistener ('touchstart', fdiv.onmousedown, false); fdiv.addeventListener ('touchmove', function (event) {// Jika hanya ada satu jari di posisi elemen ini if (event.targettouches.length == 1) {event.preventdefault (// blok tuling browser (i event. fdiv.style.top = "0px"; (Touch.pagey-parseint (fdiv.clientHeight)/2) + "px"; fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth)) + "px"; fdiv.addeventListener ('touchend', document.onmouseup, false); fdiv.ondblClick = function () {// Klik dua kali dapat bertentangan dengan acara penskalaan halaman web di Mobile Browser Alert ("Putar Imajinasi Anda"); }html
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> dokumen </iteme> </head> <body> </script src = "web-touch.js" type = "text/javascript"> </script> </html>
Diagram demo