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