JS——实现吹气球

最新推荐文章于 2025-03-27 15:50:07 发布

原创最新推荐文章于 2025-03-27 15:50:07 发布 · 973 阅读

1 ·

CC 4.0 BY-SA版权

案例专栏收录该内容

6 篇文章

订阅专栏

通过HTML、CSS和JavaScript实现了一个响应式气球动画效果。当鼠标左键点击时，气球会逐渐膨胀；当鼠标右键点击时，气球则会慢慢缩小。此效果通过设置定时器来控制气球大小的变化速度。

题目：

吹气球（圆圈），鼠标左键按下气球慢慢变大，放开则停止变化，右键按下则气球慢慢变小，放开则停止变化

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="div1" onmousedown="mouseDown(event)" onmouseup="mouseUp(event)"></div>
</body>
<script>
    //定义定时器，考虑一下为什么要定义成全局的
    var timer1 ;
    //定义方向控制，1表示放大，-1表示缩小；
    // 思考：为什么不用参数传递而用全局（迫不得已）

    var direction = 1;

    var div1 = document.getElementById("div1");
    var size = 100;//定义气球的尺寸
    var width = 200;
    var height = 200;
    function mouseDown(e){
        //开启定时器
        timer1 = setInterval(zoom,100);
        switch  (e.button){
            case 0 ://左键
                    direction = 1;
                break;
            case 2 ://右键
                direction = -1;
        }
    }

    function mouseUp(e){
        //清除定时器
        clearInterval(timer1);
    }

    //放大或者缩小
    function zoom(){
       size += direction*5;//修改球的尺寸
        div1.style.width =size + "px";
        div1.style.height = size + "px";
    }
</script>
</html>