JavaScript를 사용하여 움직이는 div를 만드는 방법은 무엇입니까?

모바일 div는 자동으로 화면 주위를 이동하거나 화면에서의 위치를 ​​변경할 수 있는 웹 요소입니다. 왼쪽 및 위쪽 스타일 속성을 조정하여 위치를 변경합니다. JavaScript를 사용하여 모바일 div를 만드는 것은 비교적 간단한 작업입니다. 약간의 HTML, CSS, JavaScript 코드만 있으면 됩니다. 이 튜토리얼에서는 JavaScript를 사용하여 움직이는 div를 만드는 방법을 보여 드리겠습니다.

HTML 코드

가장 먼저 필요한 것은 HTML 코드입니다. 다음과 같이 ID를 생성하겠습니다. "모바일 사업부". 이 div 안에는 몇 가지 콘텐츠를 배치할 것입니다. 이 콘텐츠는 귀하의 콘텐츠일 수 있습니다. 원하지만 이 예에서는 텍스트를 추가해 보겠습니다.

<div id="movingDiv"> This is my moving div! </div>

이제 HTML 코드가 있으므로 CSS 코드가 필요합니다.

CSS Code

CSS 코드는 div를 실제로 움직이게 만듭니다. div의 위치를 ​​설정하겠습니다. "친척"에게. 그러면 JavaScript를 사용하여 div를 이동할 수 있습니다. 우리도 설정해보겠습니다 div의 너비와 높이입니다.

#movingDiv { position: relative; width: 200px; height: 200px; }

이제 HTML과 CSS 코드가 있으므로 JavaScript 코드가 필요합니다.

JavaScript Code

JavaScript 코드는 실제로 div를 이동하게 합니다. setInterval 함수를 사용하여 1000밀리초(1초)마다 div를 이동합니다. 또한 CSS 속성 "top" 및 "left"를 사용하여 div를 이동합니다.

var interval = setInterval(function() {
   var div = document.getElementById("movingDiv");
   div.style.top = div.offsetTop + 1 + "px";
   div.style.left = div.offsetLeft + 1 + "px"; },
   1000);

Example

다음은 이 예제의 전체 작업 코드입니다. -

   


   <div id="movingDiv"> This is my moving div! </div>
   <script>
      var interval = setInterval(function() {
      var div = document.getElementById("movingDiv");
      div.style.top = div.offsetTop + 1 + "px";
      div.style.left = div.offsetLeft + 1 + "px"; },
      1000);
   </script>

위 코드에 대한 한 줄씩 설명 -

• 1번째 줄 - HTML 문서를 만드는 것부터 시작합니다.

• 3행 - 헤드 요소를 생성합니다.

• Line 4 - 스타일 요소를 생성합니다. 이 스타일 요소 내에 CSS 코드를 배치합니다.

• 5번째 줄 - ID가 "MoveDiv"인 div에 대한 CSS 규칙을 만듭니다. 우리는 위치를 다음으로 설정했습니다. "relative". div의 너비와 높이도 설정합니다.

• Line 12 − body 요소를 생성합니다. 이 body 요소 내부에 HTML 코드를 넣습니다.

• Line 13 − "movingDiv"이라는 ID를 가진 div를 생성합니다. . 이 div 안에는 텍스트를 넣습니다.

• Line 14 − 이 스크립트 요소 안에 JavaScript 코드를 넣습니다.

• Line 15 − "interval"이라는 변수를 만듭니다. 이 변수를 setInterval 함수로 설정합니다. 이 함수는 1000밀리초(1초)마다 div를 이동합니다.

• 16행 − "div"라는 변수를 생성합니다. 이 변수를 ID가 "movingDiv"인 HTML 요소로 설정합니다.

• 17행 − CSS "top" 속성을 사용합니다. div를 1픽셀 아래로 이동합니다.

• Line 18 − CSS "left" 속성을 사용하여 div를 오른쪽으로 1픽셀 이동합니다.

• Line 22 − HTML을 끝냅니다. document.

이 튜토리얼에서는 JavaScript를 사용하여 움직이는 div를 만드는 방법을 살펴보았습니다. 일부 HTML 코드를 생성합니다. 그런 다음 CSS 코드를 만들었습니다. 마지막으로 우리는 몇 가지를 만들었습니다. 자바스크립트 코드.

위 내용은 JavaScript를 사용하여 움직이는 div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!