<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> </head> <style type="text/css"> #showImg{ width: 200px; height: 200px; border-radius: 50%; } </style> <body> <img src="./bg1.jpg" id="showImg"/> <script> /*获取图片实例*/ var img=document.getElementById(‘showImg‘); /*定义位置变量*/ /*给图片赋予鼠标聚焦事件*/ img.onmouseover=function () { var current = 0; var flag=0; /*开启定时执行function函数*/ var temTemp=setInterval(function(){ if (flag!=90) { current = (current + 4) % 360; flag++; img.onmouseout=function(){ clearInterval(temTemp); setInterval(function(){ if (flag!=0) { current = (current - 4) % 360; flag--; }else{ current=0; return; } img.style.transform = ‘rotate(‘ + current + ‘deg)‘; }, 10); } }else{ current=0; return; } img.style.transform = ‘rotate(‘ + current + ‘deg)‘; window.console.log(current); }, 10); }; </script> </body> </html>
原文：https://www.cnblogs.com/jyfs/p/14393537.html