이 기사의 예는 참조의 이미지 전환 효과를 실현하기위한 JS의 효과를 공유합니다. 특정 내용은 다음과 같습니다
JS를 사용하여 버튼을 클릭하고 이미지를 전환하는 효과를 실현하십시오.
<div id = "box"> <div id = "img_box"> <img src = "../ raw/b1.jpg"> <img src = "../ raw/b2.jpg"> <img src = "../ raw/b3.jpg"> <img src = "../ raw/b4.jpg"> </b4.jpg "> id = "오른쪽"> </div> </div>
구조 : 고정 너비와 높이 div를 사용하여 가장 바깥 용기를 만들고 오버플로를 숨겨지게하십시오.
그런 다음 내부 레이어 img_box는 너비를 상자 너비의 4 배로 설정하고 높이는 동일합니다. 즉, IMG_Box에는 4 개의 IMG가 포함되어 있지만 하나의 가시적 인 IMG 만 포함되어 있습니다. 왼쪽과 바로 아래의 두 div는 사진을 전환하기 위해 클릭을 달성하기위한 버튼 역할을합니다. 그림을 전환하면 img_box의 왼쪽 속성을 변경하므로 IMG_Box는 위치로 설정해야합니다. 편의를 위해 상자의 위치가 관계로 설정되므로 IMG_Box는 상자에 비해 배치됩니다. 4 개의 이미지가 상자와 같은 너비와 높이로 왼쪽으로 플로트를 설정합니다.
CSS 코드 :
*{마진 : 0; 패딩 : 0;}. 상자 {너비 : 800px; 높이 : 400px; 마진 : 20px 자동; 위치 : 상대; 오버플로 : 숨겨진;}. img_box {높이 : 400px; 너비 : 3200px; 위치 : 절대; -모조 전환 : 0.5s; -webkit-transition : 0.5s;} img {너비 : 800px; 높이 : 400px; float : 왼쪽;}. 스위치 {너비 : 200px; 높이 : 100%; 위치 : 절대;}#왼쪽 {왼쪽 : 0px; 상단 : 0px; 배경 : -moz-linear-gradient (왼쪽, RGBA (84, 84, 84, 0.50), RGBA (20%, 20%, 20%, 0); 배경 : -webkit-linear-gradient (왼쪽, RGBA (84, 84, 84, 0.50), RGBA (20%, 20%, 20%, 0));}#오른쪽 {오른쪽 : 0px; 상단 : 0px; 배경 : -moz-linear-gradient (왼쪽, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0.5)); 배경 : -webkit-linear-gradient (왼쪽, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 84, 0.5));}#왼쪽 : hover {배경 : -Moz-linear-Gradient (왼쪽, 0, 0, 0,0.5), rgba (20%, 20%, 0 :#); 배경 : -moz-linear-gradient (왼쪽, RGBA (0, 0, 0,0.5), RGBA (20%, 20%, 20%, 0);}#오른쪽 : 오른쪽 : 호버 {배경 : -moz-linear- gradient (왼쪽, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0.5); 배경 : -webkit-linear-gradient (왼쪽, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0.5));}왼쪽 및 오른쪽은 배경색 및 투명성 구배 속성을 사용하며 Firefox 브라우저 및 WebKit 브라우저 만 추가됩니다. 또한 일부 IE 브라우저는 IE 및 360 Secure 브라우저와 같은 WebKit 듀얼 코어입니다.
배경 : -moz-linear-gradient (왼쪽, RGBA (84, 84, 84, 0.50), RGBA (20%, 20%, 20%, 0);
배경 : -webkit-linear-gradient (왼쪽, RGBA (84, 84, 84, 0.50), RGBA (20%, 20%, 20%, 0));
전환 중에 원활한 전환을 달성하기 위해 전환 특성이 추가됩니다.
-모조 전환 : 0.5s;
-webkit-transition : 0.5s;
JS 코드 :
var box; var count = 1; wind var left = document.getElementById ( "왼쪽"); var right = document.getElementById ( "오른쪽"); left.addeventListener ( "클릭", _ 왼쪽); right.addeventListener ( "클릭", _ 오른쪽); document.body.addeventListener ( "마우스 오버", 데모);} function _right () {var dis = 0; if (count <4) {dis = count*800; } else {dis = 0; count = 0; } box.style.left = "-"+dis+"px"; count+= 1;} 함수 _left (이벤트) {var dis = 0; if (count> 1) {dis = (2-count)*800; } else {dis = -3*800; 카운트 = 5; } box.style.left = dis+"px"; count- = 1;}글로벌 변수 수를 사용하여 현재 표시된 그림을 기록하십시오. 토글 버튼을 클릭하면 카운트에 따라 표시해야 할 사진을 계산 한 다음 img_box의 왼쪽 속성을 계산하고 설정하십시오.
위는 JS가 소개 한 이미지 전환 효과를 구현하기위한 코드입니다. 이미지 전환 효과를 달성하는 데 도움이되기를 바랍니다.