panda_web/assets/js/common/index.js

//DOM操作、Ajax
import 'http://code.jquery.com/jquery-2.1.1.min.js';
//轮播图
import Swiper from 'https://cdn.staticfile.org/Swiper/8.2.2/swiper-bundle.esm.browser.min.js';
window.Swiper = Swiper;
// bootstrap
import 'https://cdn.staticfile.org/bootstrap/5.1.3/js/bootstrap.min.js';

/**
 * 执行动画
 * @description 如果元素滚动至可视窗口，添加css动效
 * @param ele 元素的选择器
 */
window.showAnimate = function (ele, className) {
  //先隐藏元素
  $(ele).css({
    'visibility': 'hidden'
  })
  /**
   *
   * @description 得到元素的坐标信息
   */
  function GetRect (element) {
    let rect = element.getBoundingClientRect() // 距离视窗的距离
    let top = document.documentElement.clientTop ? document.documentElement.clientTop : 0 // html元素对象的上边框的宽度
    let left = document.documentElement.clientLeft ? document.documentElement.clientLeft : 0
    return {
      top: rect.top - top,
      bottom: rect.bottom - top,
      left: rect.left - left,
      right: rect.right - left
    }
  }

  let $box = $(ele)[0]
  let divH = $box.offsetHeight // div高度
  let windowH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight // 浏览器高度兼容写法
  window.onscroll = function () {
    let obj = GetRect($box)
    if (obj.top >= windowH) { // 在视口之下
    }
    if (obj.top < windowH && obj.bottom >= windowH) { // 正在出现
    }
    if (obj.top > 0 && obj.top < windowH && obj.bottom > 0 && obj.bottom < windowH) { // 正在视口中
      //添加动效
      if(!$(ele).hasClass(className)){
        $(ele).css({
          'visibility': 'unset'
        })
        $(ele).addClass(className);
      }
    }
    if (obj.top <= 0 && obj.bottom <= divH && obj.bottom > 0) { // 正在离开视口
    }
    if (obj.bottom <= 0) { // 已经离开视口
    }
  }
}

/**
 * @description 元素横向滚动至父容器的中间
 * @param ele 可以传元素的"event"或者"选择器名称"
 * @fatherEle 可滚动的父容器的元素
 */
window.eleToCenter = function (e,fatherEle){
  let item = typeof e == 'object'?$(e.target):(e);
  let container = $(fatherEle);
  let itemOffset = item.offset();
  let itemOffsetLeft = itemOffset.left + container.scrollLeft();
  let centerLeft = ( container.width() - item.width()) / 2 + item.width()*0.5;
  container.animate({
    scrollLeft: itemOffsetLeft - centerLeft
  },300)
}