HTML5 网页漂浮窗广告 JavaScript逻辑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
    <style type="text/css">
        html,
        body
        {
            margin: 0;
            padding: 0;
        }
        div
        {
            font-size: 30px;
            font-weight: bold;

            position: fixed;

            display: flex;

             200px;
            height: 200px;

            color: white;
            border-radius: 50%;
            background: red;

            justify-content: center;
            align-items: center;
        }

        div
        {
            /* Firefox */
            -webkit-animation: rotate 5s linear infinite;
               -moz-animation: rotate 5s linear infinite;
            /* Safari 和 Chrome */
                 -o-animation: rotate 5s linear infinite;
                    animation: rotate 5s linear infinite;
            /* Opera */
        }

        @keyframes rotate
        {
            0%
            {
                /* Firefox */
                -webkit-transform: rotate(0deg);
                /* IE 9 */
                   -moz-transform: rotate(0deg);
                    -ms-transform: rotate(0deg);
                /* Safari 和 Chrome */
                     -o-transform: rotate(0deg);
                        transform: rotate(0deg);
                /* Opera */
            }
            100%
            {
                /* Firefox */
                -webkit-transform: rotate(360deg);
                /* IE 9 */
                   -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                /* Safari 和 Chrome */
                     -o-transform: rotate(360deg);
                        transform: rotate(360deg);
                /* Opera */
            }
        }
    </style>
</head>

<body>
    <div id="ad">Hello, world!</div>
</body>

</html>
<script type="text/javascript">

let el = document.querySelector('#ad');

let styleTop = 0;

let styleLeft = 0;

let verticalFlag = true;

let horizontalFlag = true;

setInterval(() => {

(el.offsetHeight + styleTop === window.innerHeight) && (verticalFlag = false);

(el.offsetWidth + styleLeft === window.innerWidth) && (horizontalFlag = false);

verticalFlag ? styleTop++ : styleTop--;

horizontalFlag ? styleLeft++ : styleLeft--;

(styleTop <= 0) && (verticalFlag = true);

(styleLeft <= 0) && (horizontalFlag = true);

el.style.top = `${styleTop}px`;

el.style.left = `${styleLeft}px`;

}, 10);

</script>

相关阅读:
远程连接Oracle 服务器解决Oracle查询中文乱码
sql 复杂查询以teacher student course多对多关系为例
ZooKeeper 分布式锁实现
zookeeper原理解析-客户端与服务器端交互
zookeeper原理解析-服务器端处理流程
zookeeper原理解析-选举
zookeeper原理解析-序列化
深入浅出 Redis client/server交互流程
zookeeper原理解析-数据存储
RocketMQ原理解析-Remoting

原文地址：https://www.cnblogs.com/jserhub/p/9218115.html

HTML5 网页 漂浮窗广告 JavaScript逻辑

HTML5 网页漂浮窗广告 JavaScript逻辑