一个可暂停的飘窗

news/2024/7/7 19:22:16

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>飘窗三可暂停</title>
    <style type="text/css">
        div#roll {
            width: 200px;
            height: 200px;
            background-color: rgb(224, 113, 113);
            color: #fff;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="roll">我是飘窗</div>
    <script type="text/javascript">
        var ggRoll = {
            roll: document.getElementById("roll"),
            speed: 10,
            statusX: 1,
            statusY: 1,
            x: 100,
            y: 300,
            winW: document.documentElement.clientWidth - document.getElementById("roll").offsetWidth,
            winH: document.documentElement.clientHeight - document.getElementById("roll").offsetHeight,
            Go: function () {
                this.roll.style.left = this.x + 'px';
                this.roll.style.top = this.y + 'px';

                this.x = this.x + (this.statusX ? -1 : 1)
                if (this.x < 0) {
                    this.statusX = 0
                }
                if (this.x > this.winW) {
                    this.statusX = 1
                }

                this.y = this.y + (this.statusY ? -1 : 1)
                if (this.y < 0) {
                    this.statusY = 0
                }
                if (this.y > this.winH) {
                    this.statusY = 1
                }
            }
        }
        var interval = setInterval("ggRoll.Go()", ggRoll.speed);
        ggRoll.roll.onmouseover = function () {
            clearInterval(interval)
        };
        ggRoll.roll.onmouseout = function () {
            interval = setInterval("ggRoll.Go()", ggRoll.speed)
        };
    </script>
</body>

</html>

一个可暂停的飘窗

相关文章

php小程序生成二维码

uniapp（1）formdata格式转换

机房除尘机房常识讲解机房卫士

主动调用其他类的成员（普通调用和super方法调用）

::v-deep

SPI驱动icm20608的实验

uniapp picker时间选择器

linux UART（RS232/485）驱动实验