본 글의 예시는 참고용으로 미닫이문 효과에 대한 구체적인 코드를 공유하고 있습니다.
미닫이문 효과:
원리:
초기 상황에서는 첫 번째 문이 열려 있고 나머지 세 개의 문이 총 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!