2
내 목표는 카드의 세 이미지를 찍어서 대화 형으로 만드는 것입니다. 사용자는 호버에 의해 시작된 CSS 줌인 카드를 "픽업"한 다음 "switchImg"라고하는 javascript 기능을 사용하여 확대/축소하는 동안 이미지를 뒤집을 수 있어야합니다.간단한 카드 뒤집기 및 확대
자바 스크립트 :
function switchImg1() {
if ($('#one').css('display') == 'none') {
$('#one').css('display', 'inline');
$('#two').css('display', 'none');
} else {
$('#one').css('display', 'none');
$('#two').css('display', 'inline');
}
}
function switchImg2() {
if ($('#three').css('display') == 'none') {
$('#three').css('display', 'inline');
$('#four').css('display', 'none');
} else {
$('#three').css('display', 'none');
$('#four').css('display', 'inline');
}
}
function switchImg3() {
if ($('#five').css('display') == 'none') {
$('#five').css('display', 'inline');
$('#six').css('display', 'none');
} else {
$('#five').css('display', 'none');
$('#six').css('display', 'inline');
}
}
CSS의 :
<div id="container">
<!-- Card One -->
<img id="one" style="cursor:pointer; width:30%;" onclick="switchImg1()" src="https://lh4.googleusercontent.com/-mFYEpMXprYY/VEbJwkJXJaI/AAAAAAAALp4/9GduJ-BGvFk/s524/example-a.jpg" alt="A" />
<img id="two" style="display:none; cursor:pointer; width:30%;" onclick="switchImg1()" src="https://lh6.googleusercontent.com/-ElSRd-aC0lI/VEbJ0fwy4rI/AAAAAAAALqQ/kVli8v9s-Cw/s524/example-b.jpg" alt="B" />
<!-- Card Two -->
<img id="three" style="cursor:pointer; width:30%;" onclick="switchImg2()" src="https://lh5.googleusercontent.com/-XfqG26ltMm4/VEbJ0egpaUI/AAAAAAAALqM/Q3eL6avhUJQ/s524/example-c.jpg" alt="C" />
<img id="four" style="display:none; cursor:pointer; width:30%;" onclick="switchImg2()" src="https://lh4.googleusercontent.com/-KieQ3h-5Lp8/VEbJ0fjArLI/AAAAAAAALqI/bYxzgCuxQxo/s524/example-d.jpg" alt="D" />
<!-- Card Three -->
<img id="five" style="cursor:pointer; width:30%;" onclick="switchImg3()" src="https://lh5.googleusercontent.com/-aa_TydW4QbA/VEbKcwU_foI/AAAAAAAALqY/_fEGuyjnb5c/s524/example-e.jpg" alt="E" />
<img id="six" style="display:none; cursor:pointer; width:30%;" onclick="switch3Img()" src="https://lh3.googleusercontent.com/-_wQu4iMCRaY/VEbK0snmzAI/AAAAAAAALqg/d1F76OXqE7U/s524/example-f.jpg" alt="F" />
</div>
내 자바 스크립트 코드는 아마 중복
#container {
float:left;
position:relative;
margin:auto 0;
width:100%;
}
#one, #two, #three, #four, #five, #six {
z-index:10;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
}
#one:hover, #two:hover, #three:hover, #four:hover, #five:hover, #six:hover {
transform: scale(2);
}
HTML (같은 일을하고 3 개 카드 3 개 기능)하지만, 주요 문제는 사용자가 카드를 확대 한 다음 뒤집으려고하면 이미지 크기가 크기를 시작한 다음 다시 확대합니다.
내 코드를 정리하는 방법이 있습니까? 아니면이 작업을 처리하는 더 좋은 방법이 있습니까? 동일한 예제가 JSFiddle에 있습니다.
이것은 흥미로운 가능한 해결책입니다. 나는 rotateX를 zoom 액션에 어떻게 추가했는지를 좋아하지만,이 "flip"은 줌과는 별도로 발생해야합니다. 또한, 나는 "A"카드가 다른 카드가없는 방식으로 대부분의 시간을 공중 선회에서 점프하고 있음을 발견합니다. –
다른 카드 글자가 수직 대칭이기 때문에 A가 다른 방향으로 움직이는 것처럼 보입니다. A가 어떤 이유로 든 잘못 움직이는 것을 볼 수 있습니다. – Wezelkrozum
내가 원하는 것을 생각하면 내 대답이 향상되었습니다. 지난밤 클릭 기능에 대한 첫 번째 소식을 잘못 읽었습니다. 나는 또한 A 카드를 다른 방향으로 돌렸다. A 카드의 회전이이 방법으로 올바르게 보이는지 알려주세요. 내가 몇 분을보고 나서 더 이상 차이를 실제로 볼 수 없기 때문에 나는 궁금하다. – Wezelkrozum