HTML5 网页 漂浮窗广告 JavaScript逻辑

344 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
      html,
      body
      {
          margin: 0;
          padding: 0;
      }
      div
      {
          font-size: 30px;
          font-weight: bold;

          position: fixed;

          display: flex;

          width: 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>
  <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>
</body>
</html>