JS写滑稽笑脸运动

最新推荐文章于 2022-07-23 11:14:58 发布

mariner_zp

最新推荐文章于 2022-07-23 11:14:58 发布

阅读量443

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41174502/article/details/106369286

版权

JavaScript 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

效果演示：

（就这玩意儿，差点写崩了...）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑稽笑脸运动</title>
    <meta name="author" content="marinerzp">
    <style>
        *{padding: 0;margin: 0;}
        html,body{
            width: 100%;
            height: 100%;
        }
        #main{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background:url(images/1.jpg) 0 0/100px 100px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 3;
        }
        .show{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgb(239, 187, 101);
            position: absolute;
            animation: disappear 1.2s ;
            animation-fill-mode: forwards;
            
        }
        @keyframes disappear{
            0%{
                opacity: 1;
                transform:scale(1);
            }
            100%{
                opacity: 0;
                transform:scale(0);
            }
        }
    </style>
</head>
<body>
    <div id="main">
    </div>
    
    <script>
        let Omain=document.querySelector('#main');
        let MaxLeft=window.innerWidth-Omain.offsetWidth;
        let MaxTop=window.innerHeight-Omain.offsetHeight;

        window.onresize=function(){//监听窗口大小改变事件
            MaxLeft=window.innerWidth-Omain.offsetWidth;
            MaxTop=window.innerHeight-Omain.offsetHeight;
        };
        /*
            水平方向上：以向右为正方向
            竖直方向上：以向下为正方向
        */ 
        let Vx=6;//3px/s
        let Vy=9;//4px/s
        let X=0,Y=0;
        ~~function move(){
            X+=Vx;
            Y+=Vy;
            if (Y>=MaxTop) {
                Y=MaxTop;
                Vy=-Vy;
            }
            if (Y<=0) {
                Y=0;
                Vy=-Vy;
            }
            if (X>=MaxLeft) {
                X=MaxLeft;
                Vx=-Vx;
            }
            if (X<=0) {
                X=0;
                Vx=-Vx;
            }
            Omain.style.left=`${X}px`;
            Omain.style.top=`${Y}px`;
            
            createTail(X,Y);//生成拖尾
            requestAnimationFrame(move);
        }();
        function createTail(X,Y){
            let node=document.createElement('p');
            node.classList.add('show');
            node.style.cssText=`left:${X+20}px;top:${Y+20}px`;
            document.body.appendChild(node);
            setTimeout(()=>{
                document.body.removeChild(node);
                node=null;
            },1200);
        }
       

    </script>
</body>
</html>