Question

显示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')">&#8644</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')">&#8645</span>
            </td>
            <td/>
            <td id="pijlRight" class="pijl">
                <span onclick="swap('b', 'd')">&#8645</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')">&#8644</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>

Answer 1

您是否尝试过更改此行

else {
    img.style = "transform:rotate(0deg);";
}

那应该解决它！

Answer 2

看看这个片段！

$('.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>

Answer 3

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);
}

获奖fiddle。

我的图像只会翻转一次怎么样？

3 个答案: