JavaScript를 기반으로 슬라이딩 도어 효과를 구현하기 위한 코드 예제 소개(그림 및 텍스트)

본 글의 예시는 참고용으로 미닫이문 효과에 대한 구체적인 코드를 공유하고 있습니다.

미닫이문 효과:

원리:

초기 상황에서는 첫 번째 문이 열려 있고 나머지 세 개의 문이 총 4개 있습니다. 첫 번째 그림과 같이 닫혀 있습니다.
이미지의 너비가 120px이고 나머지 문 3개의 너비가 80px이라고 가정합니다.
초기 상태에서
두 번째 문 왼쪽까지의 거리는 120px,
세 번째 문 왼쪽까지의 거리는 200px,
네 번째 문 왼쪽까지의 거리는 280px입니다.
두 번째 문이 열리면
두 번째 문 왼쪽까지의 거리는 80px, 즉 (120-40)px입니다.
세 번째와 네 번째 문 왼쪽까지의 거리는 변경되지 않습니다.
세 번째 문이 열렸을 때
두 번째 문 왼쪽까지의 거리는 80px,
문까지의 거리는
세 번째 문 왼쪽은 160px입니다. (200-40)px

네 번째 문은 변함없이 그대로

따라서 각 문을 열었을 때 그림의 너비에서 노출된 너비를 뺀 값이 됩니다. 왼쪽으로 이동해야 한다는 뜻입니다. 세 번째 문이 열리면 두 번째 문을 먼저 이동한 다음 세 번째 문을 이동해야 합니다. 각 문이 이동하는 거리는 이미지의 너비에서 노출된 너비를 뺀 값입니다.

프로그램:

<script type="text/javascript">
 window.onload = function() {
  var container = document.getElementById("container");
  var imgs = container.getElementsByTagName("img");//获取图像
  var imgWidth = imgs[0].offsetWidth;//图片的宽度
  var exposeWidth = 200;//露出的宽度
  var containerWidth = imgWidth + exposeWidth * (imgs.length - 1); //外部盒子的总宽度
  container.style.width = containerWidth + "px";

  function Initial() {
   for(var i = 1; i < imgs.length; i++) {
    imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + "px";
   }
  }
  Initial();  
  var translateWidth = imgWidth - exposeWidth;//移动的距离
  for(var i = 0; i < imgs.length; i++) {
   (function(i) {
    imgs[i].onmouseover = function() {
     Initial(); //鼠标经过图片时，首先设置到初始状态
     for (var j=1;j<=i;j++) { //之前的图片都移动相同的距离
      imgs[j].style.left=parseInt(imgs[j].style.left)-translateWidth+"px";
     }
    }
   })(i);
  }

 }
</script>

위 내용은 JavaScript를 기반으로 슬라이딩 도어 효과를 구현하기 위한 코드 예제 소개(그림 및 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!