js实现头像转动效果 

<!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>

 

posted @ 2021-02-09 17:11  zydjjcpdszylddpll  阅读(104)  评论(0)    收藏  举报