JS代码实现图片旋转的效果

JS代码实现图片旋转的效果,要求:

  • 单击鼠标左键图片向左旋转45°;
  • 单机鼠标右键图片向右旋转45°。

实现后的GIF效果如下:

JS实现图片旋转的效果
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实现图片旋转的效果全部代码,拿走不谢!

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » JS代码实现图片旋转的效果

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们