现在我们以这个苹果的图片作为例子
我将演示代码写在这个页面网页链接，下面解释其用法。
页面结构如图
javascript代码如下
$(function() {
var r = 0;
$('img').click(function() {
r += 90;
$(this).css('transform', 'rotate(' + r + 'deg)');
});
});
核心思路是控制图片的这个css属性：
transform: rotate(360deg);
其中360deg就是360度，点一次旋转90度
温馨提示：答案为网友推荐，仅供参考
第1个回答 推荐于2017-09-15
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var current = 0;
document.getElementById('target').onclick = function(){
current = (current+90)%360;
this.style.transform = 'rotate('+current+'deg)';
}
};
</script>
</head>
<body>
<img id ="target" src="1.jpg" alt="">
</body>
</html>本回答被网友采纳
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var current = 0;
document.getElementById('target').onclick = function(){
current = (current+90)%360;
this.style.transform = 'rotate('+current+'deg)';
}
};
</script>
</head>
<body>
<img id ="target" src="1.jpg" alt="">
</body>
</html>本回答被网友采纳
相似回答