JavaScript ใช้ปุ่มเสมือนจริงของ Apple
เพียงแนะนำรหัสไปที่หน้า
มีรหัสซ้ำซ้อนและผู้ที่สนใจสามารถแก้ไขได้ด้วยตัวเอง
หากมีข้อบกพร่องใด ๆ โปรดอย่าลืมแสดงความคิดเห็นและบอกฉัน
web-touch.js
var new_element_n = document.createelement ("Style"); new_element_n.innerhtml = '#drager {' + 'ตำแหน่ง: แก้ไข;' + 'ความกว้าง: 35px;' + 'ความสูง: 35px;' + 'พื้นหลังสี: rgba (0, 0, 0, 0, 0.2);' + 'z-index: 10,000;' + 'เคอร์เซอร์: ตัวชี้;' + 'TOP: 0PX;' + 'ซ้าย: 0px;' + 'พรมแดน-รัศมี: 30%;' + 'ช่องว่าง: 6px;' + '}' + '' + '#drager> div {' + 'Border-Radius: 50%;' + 'ความกว้าง: 100%;' + 'ความสูง: 100%;' + 'พื้นหลังสี: RGBA (0, 0, 0, 0, 0.3);' + 'การเปลี่ยนแปลง: ทั้งหมด 0.2s;' + '-moz -transition: 0.2s ทั้งหมด;' + '-o -transition: ทั้งหมด 0.2s;' + '}' + '#drager: hover> div {' + 'พื้นหลังสี: rgba (0, 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 () // วางอัตโนมัติไปยังตำแหน่งที่ใกล้ที่สุดเมื่อปล่อย {document.onmousemove = null; if ((parseint (fdiv.style.top)+parseint (fdiv.clientheight)/2) <= (screenheight/2)) {// ในส่วนบนถ้า (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)) {// ใกล้ส่วนบน fdiv.style.top = "0px"; } else {// ใกล้ fdiv.style.left = "0px" ด้านซ้าย fdiv.style.left = "0px"; }} else {// ในครึ่งขวาถ้า ((parseint (fdiv.style.top)+parseint (fdiv.clientheight)/2) <= (screenwidth- (parseint (fdiv.style.left)+parseint (fdiv.clientwidth)/2)) } 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" ด้านซ้าย fdiv.style.left = "0px"; }} else {// ในครึ่งขวาถ้า ((screenheight- (parseint (fdiv.style.top)+parseint (fdiv.clientheight)/2)) <= (screenwidth- (parseint (fdiv.style.left) fdiv.style.top = (screenheight-parseint (fdiv.clientheight))+"px"; } else {// ใกล้กับ fdiv.style.left = (ScreenWidth-ParseInt (fdiv.ClientWidth))+"px"; }}}} ฟังก์ชั่น mousemove (ev) {ถ้า (ev == null) {ev = window.event;} // ie if ((ev.clienty - posy) <= 0) {// มากกว่า fdiv.style.top = "0px"; } อื่นถ้า ((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" } อื่นถ้า ((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 () {// ขนาดหน้าต่างเปลี่ยนหน้าจอเหตุการณ์ = document.documentElement.ClientWidth; screenHeight = document.documentelement.clientheight; if ((parseint (fdiv.style.top)+parseint (fdiv.clientheight))> screenHeight) {// หน้าต่างเปลี่ยนส่วนนอกเหนือจากการปรับตัว fdiv.style.top = (screenheight-parseint } if ((parseint (fdiv.style.left)+parseint (fdiv.clientwidth))> screenwidth) {// หน้าต่างเปลี่ยนส่วนนอกเหนือจากการปรับ fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth)) } document.onmouseup.apply ()}; fdiv.addeventListener ('TouchStart', fdiv.onmousedown, false); fdiv.addeventListener ('touchmove', ฟังก์ชั่น (เหตุการณ์) {// ถ้ามีเพียงนิ้วเดียวในตำแหน่งขององค์ประกอบนี้ถ้า (event.targetTouches.length == 1) {event.preventDefault ()//บล็อกเหตุการณ์เริ่มต้นของเบราว์เซอร์ 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 () {// เหตุการณ์ดับเบิลคลิกอาจขัดแย้งกับเหตุการณ์การปรับสเกลหน้าเว็บในการแจ้งเตือนเบราว์เซอร์มือถือ ("เล่นจินตนาการของคุณ"); -HTML
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> เอกสาร </title> </head> <body> </body> <script src = "web-touch.js" type = "JavaScript"> </script> </html>
ไดอะแกรมการสาธิต