JavaScript implementiert Apple -schwimmende virtuelle Schaltflächen
Stellen Sie den Code einfach der Seite ein
Es gibt einige redundante Codes, und diejenigen, die interessiert sind, können sie selbst ändern.
Wenn es einen Fehler gibt, denken Sie bitte daran, Kommentare zu kommentieren und es mir zu sagen
web-touch.js
var new_element_n = document.createelement ("style"); new_element_n.innerhtml = '#DRAGE {' + 'Position: behoben;' + 'Breite: 35px;' + 'Höhe: 35px;' + 'Hintergrundfarbe: RGBA (0, 0, 0, 0,2);' + 'Z-Index: 10000;' + 'Cursor: Zeiger;' + 'Top: 0px;' + 'links: 0px;' + 'Border-Radius: 30%;' + 'Polsterung: 6px;' + '}' + '' + '#drager> div {' + 'Border-Radius: 50%;' + 'Breite: 100%;' + 'Höhe: 100%;' + 'Hintergrundfarbe: RGBA (0, 0, 0, 0,3);' + 'Übergang: alle 0,2s;' + '-moz -Übergang: Alle 0,2s;' + '-O -Übergang: Alle 0,2s;' + '}' + '#drager: hover> div {' + 'Hintergrundfarbe: 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 () // fügen Sie automatisch in die nächste Position ein, wenn {document.onmousemove = null; if ((parseInt (fdiv.Style.top)+parseInt (fdiv.clientHeight)/2) <= (ScreenHeight/2)) {// im oberen Teil if if ((parseInt (fdiv.Style.Left))+ParseInt (fdiv.clientwidth)/2) <= (Screenwidth/2)) {//) {// im linken Teil)/2) () () {//) {// im linken Teil)/2) () (im linken Teil)/2) () () (siehe) () <= () (v. if ((parseInt (fdiv.style.top)+parseInt (fdiv.clientHeight)/2) <= (parseInt (fdiv.style.left)+parseInt (fdiv.clientwidth)/2)) {// in der Nähe des oberen Teils fdiv.style.top = "0px"; } else {// in der Nähe der linken fdiv.style.left = "0px"; } }else{//In the right half if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//Near the top fdiv.style.top="0px"; } else {// in der Nähe der rechten Fdiv.style.left = (screenwidth-parseInt (fdiv.clientwidth))+"px"; }}} else {// die untere Hälfte der if ((parseInt (fdiv.style.left)+parseInt (fdiv.clientwidth)/2) <= (Screenwidth/2)) {// in der linken Hälfte der if ( , fdiv.style.top = (screenHeight-parseInt (fdiv.clientHeight))+"px"; } else {// in der Nähe der linken fdiv.style.left = "0px"; }} else {// in der rechten Hälfte if ((screenHeight- (parseInt (fdiv.style.top)+parseInt (fdiv.clientHeight)/2) <= (Screenwidth- (parseInt (fdiv.style fdiv.style.top = (screenHeight-parseInt (fdiv.clientHeight))+"px"; } else {// in der Nähe der rechten Fdiv.style.left = (screenwidth-parseInt (fdiv.clientwidth))+"px"; }}}} function mousEmove (ev) {if (ev == null) {ev = window.event;} // ie if ((ev.clienty - posy) <= 0) {// mehr als die obere fdiv.style.top = "0px"; } else if ((ev.clienty-posy)> (screenHeight-parseInt (fdiv.clientHeight))) {// über den unteren fdiv.style.top = (screenHeight-parseInt (fdiv.clientHeight))+"px"; } else {fdiv.style.top = (ev.clienty - posy) + "px"; } if ((ev.clientX- posx) <= 0) {// über der linken Fdiv.style.left = "0px"; } else if ((ev.clientx-posx)> (screenwidth-parseInt (fdiv.clientwidth)) {// über der rechten 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 () {// Fenstergröße Änderung des Ereignisses screenwidth = document.documentElement.clientwidth; screenHeight = document.documentElement.clientHeight; if ((parseInt (fdiv.style.top)+parseInt (fdiv.clientHeight))> screenHeight) {// Das Fenster ändert den Teil über die Anpassung fdiv.style.top = (ScreenHeight-parseInt (fdiv.clientHeight))+"px"; } if ((parseInt (fdiv.style.left)+parseInt (fdiv.clientwidth))> screenwidth) {// Das Fenster ändert den Teil über die Anpassung fdiv.style.left = (screenwidth-parseInt (fdiv.clientwidth))+"px"; } document.onmouseUp.apply ()}; fdiv.addeventListener ('touchstart', fdiv.onmousedown, false); fdiv.addeventListener ('TouchMove', Funktion (Ereignis) {// Wenn es nur einen Finger in der Position dieses Elements gibt, if (Ereignis.targettouches.length == 1) {Ereignis. 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 () {// Doppelklick-Ereignis kann mit der Skalierung von Webseiten im mobilen Browser-Alarm ("Ihre Vorstellungskraft spielen") in Konflikt stehen; }html
<! docType html> <html> <head> <meta charset = "utf-8"> <title> dokument </title> </head> <body> </body> <script src = "web-touch.js" type = "text/javaScript"> </script> </html> </html>
Demo -Diagramm