어떻게 만들지?: 이미지 비교 슬라이더

이미지 두 장을 비교하는 슬라이더를 만들어보세요.

이미지 비교 슬라이더 생성

제1단계 - HTML 추가:

<div class="img-comp-container">
  <div class="img-comp-img">
    <img src="img_snow.jpg" width="300" height="200">
  </div>
  <div class="img-comp-img img-comp-overlay">
    <img src="img_forest.jpg" width="300" height="200">
  </div>
</div>

제2단계 - CSS 추가:

컨테이너는 "상대적" 정위치를 가져야 합니다。

* {box-sizing: border-box;}
.img-comp-container {
  position: relative;
  height: 200px; /* 이미지 높이와 같아야 합니다 */
}
.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
}
.img-comp-img img {
  display: block;
  vertical-align: middle;
}
.img-comp-slider {
  position: absolute;
  z-index: 9;
  cursor: ew-resize;
  /* 슬라이더 외관 설정: */
  width: 40px;
  height: 40px;
  background-color: #2196F3;
  opacity: 0.7;
  border-radius: 50%;
}

제3단계 - JavaScript 추가:

function initComparisons() {
  var x, i;
  /* "overlay" 클래스를 가진 모든 요소를 찾습니다: */
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    /* 
	각 "覆盖" 요소에 대해 한 번씩 실행합니다:
    compareImages 함수를 실행할 때, "覆盖" 요소를 매개변수로 전달합니다:
	*/
    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    /* img 요소의 너비와 높이를 가져옵니다 */
    w = img.offsetWidth;
    h = img.offsetHeight;
    /* img 요소의 너비를 50%로 설정합니다: */
    img.style.width = (w / 2) + "px";
    /* 슬라이더를 생성합니다: */
    slider = document.createElement("DIV");
    slider.setAttribute("class", "img-comp-slider");
    /* 슬라이더를 삽입합니다: */
    img.parentElement.insertBefore(slider, img);
    /* 슬라이더를 중앙에 배치합니다: */
    slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    /* 마우스 버튼을 눌렀을 때 실행되는 함수: */
    slider.addEventListener("mousedown", slideReady);
    /* 마우스 버튼을 떼었을 때 실행되는 다른 함수: */
    window.addEventListener("mouseup", slideFinish);
    /* 또는 터치(터치스크린에 대해서는: ) */
    slider.addEventListener("touchstart", slideReady);
     /* 그리고 해제(터치스크린에 대해서는: ) */
    window.addEventListener("touchend", slideFinish);
    function slideReady(e) {
      /* 이미지에서 움직일 때 발생할 수 있는 모든 다른 작업을 방지합니다： */
      e.preventDefault();
      /* 슬라이더가 클릭되었으며 이동을 준비하고 있습니다： */
      clicked = 1;
      /* 슬라이더가 움직일 때 실행되는 함수： */
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }
    function slideFinish() {
      /* 슬라이더를 더 이상 클릭하지 않습니다： */
      clicked = 0;
    }
    function slideMove(e) {
      var pos;
      /* 슬라이더를 더 이상 클릭하지 않으면 이 함수를 종료합니다： */
      if (clicked == 0) return false;
      /* 커서의 x 위치 가져오기： */
      pos = getCursorPos(e)
      /* 슬라이더가 이미지 밖에 위치하지 않도록 합니다： */
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      /* 커서 위치에 따라 캡션 이미지 크기를 조정하는 함수 실행： */
      slide(pos);
    }
    function getCursorPos(e) {
      var a, x = 0;
      e = (e.changedTouches) ? e.changedTouches[0] : e;
      /* 이미지의 x 위치 가져오기： */
      a = img.getBoundingClientRect();
      /* 마우스 커서가 이미지에 대한 x 좌표 계산： */
      x = e.pageX - a.left;
      /* 페이지 롤링을 고려합니다： */
      x = x - window.pageXOffset;
      return x;
    }
    function slide(x) {
      /* 이미지 크기 조정： */
      img.style.width = x + "px";
      /* 슬라이더 위치 설정： */
      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}

第四歩 - 스크립트 실행：

<script>
initComparisons();
</script>

직접 시도해보세요