인생 디벨로퍼

[JAVA Script] 화면전환 효과 본문

JAVA Script

[JAVA Script] 화면전환 효과

뫄뫙뫄 2023. 9. 7. 10:25
728x90
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>DevExtreme Demo</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
  <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.3/css/dx.light.css" />
  <script src="https://cdn3.devexpress.com/jslib/23.1.3/js/dx.all.js"></script>
  <script src="data.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script src="index.js"></script>
</head>

<body class="dx-viewport">
  <style>
    #p {
      margin: 0;
      padding: 0;
    }

    #p1 {
      display: block;
      background-color: aquamarine;
    }

    #p2 {
      background-color: bisque;
    }

    #p3 {
      background-color: chocolate;
    }

    .page {
      display: none;
    }
  </style>
  </head>

  <body>
    <div id="p1" class="page 1" style="width: 300px; height: 100px;">
      <h1>1페이지</h1>
    </div>
    <div id="p2" class="page 2" style="width: 300px; height: 100px;">
      <h1>2페이지</h1>
    </div>
    <div id="p3" class="page 3" style="width: 300px; height: 100px;">
      <h1>3페이지</h1>
    </div>
    <button type="button" onclick="prevpage()">이전으로</button>
    <button type="button" onclick="nextpage()">다음으로</button>

    <script>
      var index = 1;
      function nextpage() {
        index++;
        if (index > 3) {
          index--;
          return;
        }
        $(".page").hide()
        $("#p" + index).show()
      }
      function prevpage() {
        index--;
        if (index == 0) {
          index++;
          return;
        }
        $(".page").hide()
        $("#p" + index).show()
      }
    </script>
  </body>
</body>

</html>

 

팝업창 띄워 페이지 전환 효과 등등 

나중에 또 필요할거 같아서 메모

728x90

'JAVA Script' 카테고리의 다른 글

[기초 JAVA Script] 3-11강 객체  (0) 2023.10.08
[기초 JAVA Script] 3-10강 배열 (항목 리스트 표시)  (0) 2023.10.08
[기초 JAVA Script] 3-4강 함수 / 사칙연산  (0) 2023.07.16
[기초 JAVA Script] 3-3강 반복문 for문 / while 문  (0) 2023.07.16
[기초 JAVA Script] 3-2강 비교 연산자 / 논리 연산자  (0) 2023.07.16
'JAVA Script' Related Articles more