3,383
个编辑
MCBBS Wiki欢迎您共同参与编辑！在参与编辑之前请先阅读Wiki方针。
如果在编辑的过程中遇到了什么问题，可以去讨论板提问。
为了您能够无阻碍地参与编辑 未验证/绑定过邮箱的用户，请尽快绑定/验证。
MCBBS Wiki GitHub群组已上线！
您可以在回声洞中发表吐槽！
服务器状态监控。点击进入
本站由MCBBS用户自行搭建，与MCBBS及东银河系漫游指南（北京）科技有限公司没有从属关系。点此了解 MCBBS Wiki 不是什么>>
微件:TopSign：修订间差异
跳到导航
跳到搜索
重写 topsign，这一版代码不依赖 jQuery
Sheep-realms（留言 | 贡献） 小无编辑摘要 |
Salt lovely（留言 | 贡献） （重写 topsign，这一版代码不依赖 jQuery） |
||
|
<includeonly><
"use strict";
(() => {
function topsign(id,height){▼
// widget/TopSign/widget.ts
topsign({ query: ".topsign", interval: 6e3, animationTime: 300 });
let index = 0;
const { query, interval = 5e3, animationTime = 300 } = props;
const initView = () => {
const container = document.querySelector(query);
})▼
if (!(container instanceof HTMLElement))
return;
const list = Array.from(container.children).filter((el) => el instanceof HTMLElement);
if (list.length < 2)
return;
const { offsetHeight: height } = container;
const current = index;
index++;
if (index >= list.length)
index = 0;
const next = index;
list.forEach((el, i) => {
el.style.lineHeight = `${height}px`;
el.style.height = `${height}px`;
el.style.transform = `translateY(${i === current ? 0 : height}px)`;
});
return { list, height, current: list[current], next: list[next] };
};
const animation = (props2) => {
const { startTime, height, current, next } = props2;
const now = Date.now();
if (now >= startTime + animationTime) {
current.style.transform = `translateY(${height}px)`;
next.style.transform = `translateY(0px)`;
} else {
const percent = (now - startTime) / animationTime;
current.style.transform = `translateY(${-height * percent}px)`;
next.style.transform = `translateY(${height * (1 - percent)}px)`;
requestAnimationFrame(() => animation({ startTime, height, current, next }));
}
};
const setView = () => {
const init = initView();
if (!init)
return;
const { height, current, next } = init;
requestAnimationFrame(() => animation({ startTime: Date.now(), height, current, next }));
setTimeout(() => setView(), interval);
};
setTimeout(() => setView(), interval);
initView();
index = 0;
})();
</script></includeonly>
| |||