JS——实现吹气球

最新推荐文章于 2022-05-18 16:28:02 发布

肉嘟嘟_

最新推荐文章于 2022-05-18 16:28:02 发布

阅读量891

点赞数

分类专栏：案例

本文链接：https://blog.csdn.net/cq7421/article/details/77087441

版权

案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

题目：

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

<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" οnmοusedοwn="mouseDown(event)" οnmοuseup="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>

肉嘟嘟_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS——实现吹气球

题目：吹气球（圆圈），鼠标左键按下气球慢慢变大，放开则停止变化，右键按下则气球慢慢变小，放开则停止变化 #div1{ width:100px; height:100px; border-radius: 50%; background-color:
复制链接

扫一扫