太原网站制作_太原网站建设_太原做网站_秘密武器开发者中心
历史搜索

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

游客2025-01-20 12:30:02

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

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

实现后的 GIF 效果如下:

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

标签:JavaScript

本文是由用户"游客"发布,所有内容的版权归原作者所有。没有经过书面许可,任何单位或个人不得以任何形式复制、转载、引用本网站的内容。否则将追究法律责任。

相关专题