动画工具函数

• 循环滚动列表(Jquery)

循环滚动列表(Jquery)

Jquery 版本为：3.1.1

/**
 * 滚动列表
 * @param {HTMLElement} ele 列表元素
 */
function scrollList(ele) {
  ele.scrollInterval && clearInterval(ele.scrollInterval);
  
  const scrollHeight = ele.height();
  const ulHeight = ele.children("ul").outerHeight();
  const firstChild = ele.children("ul").children("li:first-child");
  const firstChildHeight =
    parseFloat(firstChild.outerHeight()) +
    parseFloat(firstChild.css("margin-bottom"));
  
  function scrollList() {
    if (parseInt(scrollHeight) < parseInt(ulHeight)) {
      ele
        .children("ul")
        .animate({"margin-top": "-" + firstChildHeight + "px"}, function () {
          $(this).css({"margin-top": "0"});
          ele
            .children("ul")
            .children("li:first-child")
            .insertAfter(ele.children("ul").children("li:last-child"));
        });
    }
  }
  
  ele.scrollInterval = setInterval(function () {
    scrollList();
  }, 2000);
  ele.mouseenter(function () {
    clearInterval(ele.scrollInterval);
    ele.css({"overflow-y": "auto"});
  });
  ele.mouseleave(function () {
    ele.scrollInterval = setInterval(function () {
      scrollList();
    }, 2000);
    ele.animate({scrollTop: 0});
    ele.css({"overflow-y": "hidden"});
  });
}