Question

我有这个：

<input type="image" value="" id="countButton" src="my image here" />

每当有人点击图像时，它应该旋转90度。

Answer 1

您可以使用css翻转图片。对于click事件监听器，您可以使用jQuery或只使用纯JavaScript。

＆＃13;

$("#countButton").click(function() {
    $(this).toggleClass("rotate");
});

＆＃13;

.rotate {
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="image" value="" id="countButton" src="http://dummyimage.com/300x150/000/fff" />

＆＃13;

Answer 2

您可以使用jquery更改图像标记的src

$(document).ready(function(){
	$('.flipImage').click(function(){
  	$(this).attr("src", "http://blog.retevis.com/wp-content/uploads/2016/05/New-Enhancements-For-RT3RT8-Software-2.jpg");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="flipImage" src="http://www.cityofchicago.org/content/dam/city/depts/doit/supp_info/software_dev_med.jpg" />

见jfiddle

https://jsfiddle.net/nkfyk7dz/4/

如何在点击时旋转图像（输入类型图像）

2 个答案: