4图像显示,它假设通过使用箭头指示器将单击并与另一个交换图像水平翻转图像。图像交换正在工作,但图像只会翻转一次。
以下是我的代码,如何多次翻转图像?
我已经尝试了几件事,似乎无法使它起作用。
<body>
<h1>My Images Gallery</h1>
<div class="polaroid">
<img src="winter.jpg" alt="Winter view" style="width:100%">
<div class="container">
<p>Make the image just like this by clicking and moving the tiles</p>
</div>
</div>
<table>
<tr>
<td id="a">
<img id="imga" src="right-top.jpg" alt="Winter view" onclick="flip('imga')">
<div id="texta">Right top tile</div>
</td>
<td id="pijlTop" class="pijl">
<span onclick="swap('a', 'b')">⇄</span>
</td>
<td id="b">
<div>
<img id="imgb" src="left-top.jpg" alt="Winter view" onclick="flip('imgb')">
</div>
<div id="textb">Left top tile</div>
</td>
</tr>
<tr>
<td id="pijlLeft" class="pijl">
<span onclick="swap('a', 'c')">⇅</span>
</td>
<td/>
<td id="pijlRight" class="pijl">
<span onclick="swap('b', 'd')">⇅</span>
</td>
</tr>
<tr>
<td id="c">
<div>
<img id="imgc" src="right-down.jpg" alt="Winter view" onclick="flip('imgc')">
</div>
<div id="textc">Right bottom tile</div>
</td>
<td id="pijlBottom" class="pijl">
<span onclick="swap('c', 'd')">⇄</span>
</td>
<td id="d">
<img id="imgd" src="left-down.jpg" alt="Winter view" onclick="flip('imgd')">
<div id="textd">Left bottom tile</div>
</td>
</tr>
</table>
<script>
function flip(a) {
var img = document.getElementById(a);
if (img.style === 'img'){
img.style = "transform:rotate(180deg);";
}
else {
img.style = "transform:rotate(180deg);";
}
}
function swap(a, b) {
var atext = document.getElementById("text" + a).innerHTML;
var btext = document.getElementById("text" + b).innerHTML;
var aimg = document.getElementById("img" + a).src;
var bimg = document.getElementById("img" + b).src;
document.getElementById("text" + a).innerHTML = btext;
document.getElementById("text" + b).innerHTML = atext;
document.getElementById("img" + a).src = bimg;
document.getElementById("img" + b).src = aimg;
}
</script>
</body>
您是否尝试过更改此行
else {
img.style = "transform:rotate(0deg);";
}
应该修复它!
看这个片段!
$('.container').click(function() {
$(this).toggleClass('active');
});
.container {
width: 400px;
height: 400px;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.active {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
transform-style: preserve-3d;
transition: all 1.0s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img src="http://placehold.it/400x400"/>
</div>
transform:rotate(180deg)
始终相对于原始图像设置旋转。这就是为什么您的代码仅旋转一次图像。如果要再次翻转图像,则应检查它是否被翻转,如果是的,请将其设置回transform:rotate(0deg)
。这是普通的JavaScript实现,因为我注意到您没有使用jQuery。
html:
function flip(a) {
var img = document.getElementById(a);
if(img.classList.contains('flipped')){
img.classList.remove('flipped');
} else {
img.classList.add('flipped');
}
}
CSS:
.flipped {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
获奖小提琴。