이 기사에서는 마우스 박스 선택 효과를 달성하기위한 JS의 방법을 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
<! docType html public "-// w3c // dtd html 4.01 // en" "http://www.w.w3.org/tr/html4/strict.dtd"> html> html; utf-incond; 선택 효과 </title> <tyle> *{패딩 : 0; 여백 : 0; } #bottom {위치 : 절대; 하단 : 0px; 너비 : 100%; 높이 : 40px; 테두리 : 1px 고체 #000; 배경 :#000; 색상 : #fff; } .tempdiv {Border : 1px 파란색; 배경 :#5A72F8; 위치 : 절대; 너비 : 0; 높이 : 0; 필터 : 알파 (불투명도 : 10); 불투명도 : 0.1} </style> <script type = "text/javaScript"> wind document.onmousedown = function (e) {var posx = e.clientx; var posy = e.clienty; var div = document.createelement ( "div"); Div.ClassName = "tempdiv"; div.style.left = e.clientx+"px"; div.style.top = e.clienty+"px"; Document.body.appendChild (div); document.onmouseMove = function (ev) {div.style.left = math.min (ev.clientx, posx) + "px"; div.style.top = math.min (Ev.Clienty, posy) + "px"; div.style.width = math.abs (posx -ev.clientx)+"px"; div.style.height = math.abs (posy -ev.clienty)+"px"; statebar.innerhtml = "mousex :" + ev.clientx + "<br/> mousey :" + ev.clienty; document.onMouseUp = function () {div.parentNode.RemoveChild (div); document.onmouseMove = null; document.onmouseup = null; }}}} </script> </head> <body> <div id = "bottom"> </div> </body> </html>JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Malgority Sknickes의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.