2
我的目标是拍摄三张卡片并使它们互动。用户应该能够“拾取”通过悬停启动的CSS缩放的卡片，然后使用名为“switchImg”的JavaScript函数在缩放图像时翻转图像。简单的卡片翻转和缩放
的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：
#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
<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>
我的JavaScript代码可能是多余的（3个功能3卡做同样的事情），但主要问题是在用户放大卡并尝试翻转之后 - 图像重新缩小为它开始大小，然后重新放大。
有没有办法清理我的代码或有没有更好的方法来处理这个任务？在JSFiddle上有一个相同的例子。
这是一个有趣的解决方案。我喜欢你如何在缩放动作中添加rotateX，但这种“翻转”需要与缩放分开进行。另外，我注意到，“A”卡的方式，其他的卡是不能轻易大部分时间徘徊。 – 2014-10-22 02:08:13
我认为它看起来像一个正在走向另一个方向，因为对方的卡信件是垂直symmatrical。你可以看到A出于某种原因错误地移动了。 – Wezelkrozum 2014-10-22 16:02:50
我改进了我对自己想要的东西的回答。我误解了你昨天晚上关于点击功能的第一篇文章。我也用另一种方式旋转了A卡。让我知道这张A卡的旋转看起来是否正确。我很好奇，因为在看了几分钟之后我再也看不到它们了:) – Wezelkrozum 2014-10-22 20:31:02