57 lines
2.0 KiB
JavaScript
57 lines
2.0 KiB
JavaScript
// 无限循环左右滚动插件
|
|
const vhInfiniteLoop = {
|
|
init: function (dom, k = true, time = 1) {
|
|
const _this = this;
|
|
// 设置唯一标识符并初始化
|
|
const numStr = `${dom.classList.value}-num`;
|
|
const widthStr = `${dom.classList.value}-width`;
|
|
const funStr = `${dom.classList.value}-fun`;
|
|
_this[numStr] = 0;
|
|
_this[funStr] = null;
|
|
// Copy一遍子元素DOM并添加到父元素DOM尾部
|
|
Array.from(dom.children)
|
|
.map(i => i.cloneNode(true))
|
|
.forEach(i => dom.appendChild(i));
|
|
// 取宽度，设置初始位置，绑定事件
|
|
// 每个子元素给悬浮事件
|
|
Array.from(dom.children).forEach(i => {
|
|
// 悬浮事件
|
|
i.addEventListener("mouseenter", function () {
|
|
_this[funStr] = function () {
|
|
requestAnimationFrame(() => {
|
|
_this[funStr](dom, numStr, widthStr, k);
|
|
});
|
|
};
|
|
});
|
|
// 取消悬浮事件
|
|
i.addEventListener("mouseleave", function () {
|
|
_this[funStr] = function (dom, numStr, widthStr, k) {
|
|
_this[widthStr] = dom.offsetWidth;
|
|
!k && (dom.style.transform = `translateX(-${_this[widthStr] / 2}px)`);
|
|
_this[numStr] += time;
|
|
dom.style.marginLeft = `${k ? "-" : ""}${_this[numStr]}px`;
|
|
_this[numStr] >= _this[widthStr] / 2 && (_this[numStr] = 0);
|
|
requestAnimationFrame(() => {
|
|
_this[funStr](dom, numStr, widthStr, k);
|
|
});
|
|
};
|
|
});
|
|
});
|
|
// 设置循环函数
|
|
_this[funStr] = function (dom, numStr, widthStr, k) {
|
|
_this[widthStr] = dom.offsetWidth;
|
|
!k && (dom.style.transform = `translateX(-${_this[widthStr] / 2}px)`);
|
|
_this[numStr] += time;
|
|
dom.style.marginLeft = `${k ? "-" : ""}${_this[numStr]}px`;
|
|
_this[numStr] >= _this[widthStr] / 2 && (_this[numStr] = 0);
|
|
requestAnimationFrame(() => {
|
|
_this[funStr](dom, numStr, widthStr, k);
|
|
});
|
|
};
|
|
// 启动
|
|
requestAnimationFrame(() => {
|
|
_this[funStr](dom, numStr, widthStr, k);
|
|
});
|
|
}
|
|
};
|