微件:TopSign：修订间差异

←上一编辑

微件:TopSign (查看源代码)

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

添加1,601字节、 2022年8月3日 (星期三)

重写 topsign，这一版代码不依赖 jQuery

可视化wikitext

Salt lovely

行政员、界面管理员、管理员

3,389

个编辑

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