一个可暂停的飘窗

最新推荐文章于 2024-04-09 17:52:17 发布

爱学习的小饼干

最新推荐文章于 2024-04-09 17:52:17 发布

阅读量121

点赞数

分类专栏：笔记文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_41813243/article/details/122083517

版权

笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!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>

爱学习的小饼干

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个可暂停的飘窗

<!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; .
复制链接

扫一扫