javascript - 用图像翻转 Div 或者只是图像 onClick=flip ('ID NAME' );

Question

我想水平和垂直翻转图像我该怎么做？ onClick 函数通过它的 id 来实现。

<script>
    function fliph(imageid){
        var imageid = imageid;
        //What Should I have to Type HERE???
    }
    function flipv(imageid){
        var imageid = imageid;
        //What Should I have to Type HERE???
    }
</script>
<input type="submit" name="flip" value="Flip Horizontal" onClick="fliph('imageid')" />
<input type="submit" name="flip" value="Flip Vertical" onClick="flipv('imageid')" />
<img src="http://classihome.com/uploads/gallery/1453292889developlda.jpg" id="imageid">

Answer 1

这两个函数的作用是通过提供的 id 查找元素，然后分别切换 .flipv 或 .fliph 类。

然后我们使用 CSS 变换来缩放图像。

注意:我使用的是 classList，它是原生 JavaScript，但它在旧版浏览器中不起作用。如果您已经在使用 jQuery，我鼓励您改用 $('#' + imageid).toggleClass('flipv'); 之类的内容。

function fliph (imageId) {
  var el = document.getElementById(imageId);
  el.classList.toggle('fliph');
}

function flipv (imageId) {
  var el = document.getElementById(imageId);
  el.classList.toggle('flipv');
}

.flipv {
  transform: scaleY(-1);
}

.fliph {
  transform: scaleX(-1);
}

.flipv.fliph {
  transform: scale(-1, -1);
}

<input type="submit" name="flip" value="Flip Horizontal" onClick="fliph('imageid')" />
<input type="submit" name="flip" value="Flip Vertical" onClick="flipv('imageid')" />
<img src="http://classihome.com/uploads/gallery/1453292889developlda.jpg" id="imageid">

编辑:使用 CSS 类而不是内联样式。