aiforge/web_src/js/features/ad.js

; (function () {
  const adList = [{
    id: 1,
    pos: {
      left: 50,
      bottom: 50,
    },
    src: '/img/ad/ad01.png',
    url: '/user/invitation_tpl',
    width: 144,
    height: 108,
  }/*, {
    id: 2,
    pos: {
      right: 50,
      bottom: 50,
    },
    src: '/img/ad/ad01.png',
    url: '/user/invitation_tpl',
    width: 144,
    height: 108,
  }*/];

  function createAd(adList) {
    const adInfoStr = window.localStorage.getItem('ads') || '{}';
    let adInfoObj = JSON.parse(adInfoStr);
    const today = new Date();
    const timeEnd = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1).getTime();
    const now = Date.now();
    if (!adInfoObj.expires || adInfoObj.expires <= now) {
      adInfoObj = {
        expires: timeEnd,
      };
    }
    for (var i = 0, iLen = adList.length; i < iLen; i++) {
      var adI = adList[i];
      var showOr = adInfoObj[adI.id] === false ? false : true;
      adInfoObj[adI.id] = showOr;
      if (!showOr) continue;
      var adEl = $(`<div class="__ad_c__" _id="${adI.id}" style="position:fixed;z-index:99999999;
        width:${adI.width}px;height:${adI.height}px;
        left:${adI.pos.left !== undefined ? adI.pos.left + 'px' : ''};
        top:${adI.pos.top !== undefined ? adI.pos.top + 'px' : ''};
        right:${adI.pos.right !== undefined ? adI.pos.right + 'px' : ''};
        bottom:${adI.pos.bottom !== undefined ? adI.pos.bottom + 'px' : ''};">
        <a style="" href="${adI.url}" target="_blank">
          <img style="height:100%;width:100%;" src="${adI.src}" />
        </a>
        <div class="__ad_close_c__" style="position:absolute;top:6px;right:6px;">
          <i class="ri-close-circle-line __ad_close__" style="color:white;font-size:18px;cursor:pointer;"></i>
        </div>
      </div>`);
      $('body').append(adEl);
    }
    window.localStorage.setItem('ads', JSON.stringify(adInfoObj));
  }

  function initAdEvent() {
    $('body').on('click', '.__ad_c__ .__ad_close__', function () {
      var self = $(this);
      var adEl = self.closest('.__ad_c__');
      var adId = adEl.attr('_id');
      const adInfoStr = window.localStorage.getItem('ads') || '{}';
      const adInfoObj = JSON.parse(adInfoStr);
      adInfoObj[adId] = false;
      window.localStorage.setItem('ads', JSON.stringify(adInfoObj));
      adEl.remove();
    });
    var scrollTopOld = $(document).scrollTop();
    var timeHandler = null;
    $(window).scroll(function (e) {
      var scrollTop = $(document).scrollTop();
      var offSet = scrollTop - scrollTopOld;
      scrollTopOld = scrollTop;
      timeHandler && clearTimeout(timeHandler);
      $('.__ad_c__').animate({ bottom: 50 + offSet + 'px' }, 0);
      timeHandler = setTimeout(function () {
        $('.__ad_c__').animate({ bottom: 50 + 'px' }, 0);
      }, 20);
    });
  }

  setTimeout(function () {
    createAd(adList);
    initAdEvent();
  }, 0);
})();