JS 代码实现图片旋转的效果,要求:
- 单击鼠标左键图片向左旋转 45°;
- 单机鼠标右键图片向右旋转 45°。
实现后的 GIF 效果如下:

HTML 部分(只是一个简简单单的图片) :
<img id="img01" src="images/girl.jpg" />
JS 代码如下:
<script>
//记录旋转角度的变量
var current = 0;
//鼠标右键点击事件
img01.oncontextmenu = function (e) {
//取消鼠标右键的默认事件(也就是出现一个白色的菜单)
e.preventDefault();
//每次点击鼠标右键 current 都会增加 45
current += 45;
//向右旋转 45 度
this.style.transform = 'rotate(' + current + 'deg)';
}
//鼠标左键点击事件
img01.onclick = function () {
//每次点击鼠标左键 current 都会减少 45
current -= 45;
//向左旋转 45 度
this.style.transform = 'rotate(' + current + 'deg)';
}
</script>
以上就是 JS 实现图片旋转的效果全部代码,拿走不谢!