微件:TopSign：修订间差异

可视化wikitext

@@ 第1行： / 第1行： @@
-<includeonly><script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
+<includeonly><script>
+"use strict";
-<script>
+(() => {
- function topsign(id,height){
+ // widget/TopSign/widget.ts
- var ul=$(id);
+ topsign({ query: ".topsign", interval: 6e3, animationTime: 300 });
- var pFirst=ul.find('p:first');
+ function topsign(props) {
- $(id).animate({top:height}).animate({"top":0},0,function(){
+ let index = 0;
- var clone=pFirst.clone();
+ const { query, interval = 5e3, animationTime = 300 } = props;
- $(id).append(clone);
+ const initView = () => {
- pFirst.remove();
+ const container = document.querySelector(query);
- })
+ if (!(container instanceof HTMLElement))
- }
+ return;
- setInterval("topsign('.topsign .topsignitem','-55px')",5000)
+ 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>

微件:TopSign：修订间差异

2022年8月3日 (三) 00:15的最新版本

导航菜单