JS代码实现图片旋转的效果
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 实现图片旋转的效果全部代码,拿走不谢!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » JS代码实现图片旋转的效果
码云笔记 » JS代码实现图片旋转的效果