(十三)原生js案例之瑟瑟发抖的弹窗广告

网页里面的都懂弹窗广告，经常出现下方两个角落的效果

效果实现

代码实现

• 必要的css

• 静态页面

<img src="../day04/images/3.png" alt="" srcset="">

img {
      width: 300px;
      display: block;
      margin: 0 auto;
      position: absolute;
      left: 300px;
    }

• 核心代码

window.onload = function () {
      const oImg = document.querySelector('img');

      oImg.onclick = function () {
        let arr = []
        for (let i = 20; i >= 0; i -= 2) {
          arr.push(i, -i)
        }
        arr.push(0)
        const _that = this
        let index = 0
        clearInterval(oImg.timer)
        oImg.timer = setInterval(function () {
          _that.style.left = _that.offsetLeft + arr[index] + 'px';
          index++
          if (index === arr.length) {
            clearInterval(oImg.timer)
            index = 0
            oImg.timer = setInterval(function () {
              _that.style.top = _that.offsetTop + arr[index] + 'px';
              index++
              if (index === arr.length) {
                clearInterval(oImg.timer)
              }
            }, 30)
          }
        }, 30)
      }
    }