2021-02-09 17:11阅读: 94评论: 0推荐: 0

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>

上一篇spring boot配置分页助手

下一篇linux添加新用户

本文作者：zydjjcpdszylddpll

本文链接：https://www.cnblogs.com/jyfs/p/14393537.html

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

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

怎样的结局才配得上这一路的颠沛流离

js实现头像转动效果

公告

随笔分类