JavaScript는 Apple Floating Virtual 버튼을 구현합니다
코드를 페이지에 소개하십시오
몇 가지 중복 코드가 있으며 관심있는 코드는 직접 수정할 수 있습니다.
버그가 있으면 댓글을 달고 말해주십시오.
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;' + 'Border-Radius : 30%;' + '패딩 : 6px;' + '}' + '' + '#drager> div {' + 'Border-Radius : 50%;' + '폭 : 100%;' + '높이 : 100%;' + '배경색 : RGBA (0, 0, 0, 0.3);' + '전환 : 모든 0.2s;' + ' -모임 전달 : 모든 0.2s;' + '-o -bransition : 모든 0.2s;' + '}' + '#drager : hover> div {' + '배경색 : 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); 문서 .OnMousEmove = MousEmove; } document.onmouseup = function () // 릴리스시 가장 가까운 위치에 자동으로 붙여 넣습니다 {document.onmouseMove = null; if ((parseint (fdiv.style.top)+parseint (fdiv.clientHeight)/2) <= (ScreenHeight/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"; } else {// 왼쪽 근처 fdiv.style.left = "0px"; }} else {// (parseint (fdiv.style.top)+parseint (fdiv.clientheight)/2) <= (screenwidth- (parseint (fdiv.style.left)+parseint (fdiv.clientwidth)/2))) {// 근처의 top fdiv. } else {// 오른쪽 근처의 fdiv.style.left = (screenwidth-parseint (fdiv.clientWidth))+"px"; }}} else {// if ((parseint (fdiv.style.left)+parseint (fdiv.clientWidth)/2) <= (ScreenWidth/2)) {// if (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"; }} else {// 오른쪽 절반에서 (screenHeight- (parseint (fdiv.style.top)+parseint (fdiv.clientHeight)/2))) <= (ScreenWidth- (parseint (fdiv.style.left))+parseint (fdiv.clientWidth)) {// fdiv.style.top = (Screenheight-Parseint (fdiv.clientHeight))+"PX"; } else {// 오른쪽 근처의 fdiv.style.left = (screenwidth-parseint (fdiv.clientWidth))+"px"; }}}} 함수 mouseMove (ev) {if (ev == null) {ev = wind } else if ((ev.clienty-posy)> (screenHeight-parseint (fdiv.clientHeight))) {// 하단 위의 fdiv.style.top = (screenHeight-parseyint (fdiv.clientHeight))+"px"; } else {fdiv.style.top = (ev.clienty -posy) + "px"; } if ((ev.clientx-posx) <= 0) {// 왼쪽 위의 fdiv.style.left = "0px"; } else if ((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 = wind ScreenHeight = Document.DocumentELement.ClientHeight; if (parseint (fdiv.style.top)+parseint (fdiv.clientheight))> ScreenHeight) {// 창은 적응을 넘어 부분을 변경합니다. } if ((parseint (fdiv.style.left)+parseint (fdiv.clientwidth))> screenwidth) {// 창은 적응을 넘어 부분을 변경합니다. } document.onmouseup.apply ()}; fdiv.addeventListener ( 'touchstart', fdiv.onmousedown, false); fdiv.adeventListener ( 't fdiv.style.top = "0px"; (touch.pagey-parseint (fdiv.clientHeight)/2) + "px"; fdiv.style.left = (screenwidth-parseint (fdiv.clientwidth)) + "px"{fdiv.style.left = (fdiv.clientwidth)/2) + "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>
데모 다이어그램