原生JS实现图片旋转功能

废话不多说，直接进入主题

原生JS代码实现图片旋转的效果，下面两条是功能

单击鼠标左键图片向左旋转45°，
单机鼠标右键图片向右旋转45°

成功后的效果(视频放不了！)

上JS代码

html部分(只是一个简简单单的图片)
<img src="img/1.jpg" id="img01" />

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>

以上的短短的代码就可以完成图片旋转的功能,是不是感觉很简单呢, 本篇博客到此就结束了.