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');之类的内容。

＆＃13;

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

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

Answer 2

我认为翻转意味着旋转90度。这样你就可以有四个步骤。您将访问image元素的style属性。

这就是你的代码应该是这样的。

<body>

   <img id="imageId" style="border:1px solid blue; width:50px; height:30px;">

   <button onclick="flip('imageId')"/> 


</body>
<script>
var deg = 90;
var currentRotation = 0;
function flip(imageId){
   var imageRef = document.getElementById(imageId); 
   if(currentRotation === 270){ 
    currentRotation = 0; 
} 
else {
        currentRotation += deg;
}

imageRef.style.webkitTransform = 'rotate('+currentRotation+'deg)'; 
imageRef.style.mozTransform    = 'rotate('+currentRotation+'deg)'; 
imageRef.style.msTransform     = 'rotate('+currentRotation+'deg)'; 
imageRef.style.oTransform      = 'rotate('+currentRotation+'deg)'; 
imageRef.style.transform       = 'rotate('+currentRotation+'deg)'; 
}
</script>
</html>

使用图像翻转Div或只是图像onClick = flip（'ID NAME'）;

2 个答案: