تقوم JavaScript بتنفيذ أزرار Apple العائمة
فقط قدم الرمز إلى الصفحة
هناك بعض الرموز الزائدة ، وأولئك المهتمين يمكنهم تعديلها بنفسك.
إذا كان هناك أي خطأ ، فيرجى تذكر التعليق وأخبرني
web-touch.js
var new_element_n = document.createElement ("style") ؛ new_element_n.innerhtml = '#drager {' + 'الموضع: ثابت ؛' + "العرض: 35px ؛" + "الارتفاع: 35px ؛" + "خلفية اللون: RGBA (0 ، 0 ، 0 ، 0.2) ؛" + 'Z-index: 10000 ؛' + "المؤشر: مؤشر ؛" + "أعلى: 0px ؛" + "اليسار: 0px ؛" + 'الحدود radius: 30 ٪ ؛' + "الحشو: 6px ؛" + '}' + '' + '#drager> div {' + 'Border-Radius: 50 ٪ ؛ " + "العرض: 100 ٪ ؛" + "الارتفاع: 100 ٪ ؛" + "لون الخلفية: RGBA (0 ، 0 ، 0 ، 0.3) ؛" + "الانتقال: الكل 0.2s ؛" + '-moz -transition: all 0.2s ؛' + '-o -transition: all 0.2s ؛' + '}' + '#drager: hover> div {' + 'background-color: 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 = '<viv> </viv>' ؛ document.body.appendChild (new_element_n) ؛ // // var posx ؛ var posy var screenwidth = document.documentElement.ClientWidth ؛ var screkeight = 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) <= (screwheight/2)) {// في الجزء العلوي if ((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" ؛ } آخر {// بالقرب من fdiv.style.left = "0px" ؛ }} آخر {// في النصف الأيمن إذا ((parseint (fdiv.style.top)+parseint (fdiv.clientheight)/2) <= (screenwidth- (parseint (fdiv.style.left)+parseint (fdiv.clientwidth)/2)))) } آخر {// بالقرب من fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth))+"px" ؛ }}} آخر {// النصف السفلي من 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" ؛ } آخر {// بالقرب من fdiv.style.left = "0px" ؛ }} آخر {// في النصف الأيمن if ((screenHeight- (parseint (fdiv.style.top)+parseint (fdiv.clientheight)/2)) <= screenWidth- (parseint (fdiv.style.left)+parseint (fdiv.clientwidth)/2)))) {////بالقرب fdiv.style.top = (screenheight-parseint (fdiv.clientheight))+"px" ؛ } آخر {// بالقرب من fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth))+"px" ؛ }}}} وظيفة mousemove (ev) {if (ev == null) {ev = window.event ؛} // ie if ((ev.clienty - posy) <= 0) {// أكثر من top fdiv.style.top = "0px" ؛ } آخر إذا ((ev.clienty-posy)> (screenheight-parseint (fdiv.clientheight)))) {// فوق fdiv.style.top = (screenheight-parseint (fdiv.clientheight))+"px" ؛ } آخر {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" ؛ } آخر {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))> screkheight) {// النافذة تغير الجزء إلى ما وراء التكيف 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 () 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 = "text/javaScript"> </script> </html>
الرسم البياني التجريبي