Salt lovely：仿照蒸汽平台的集换式卡牌效果制作的

2022-06-25T08:03:01Z

仿照蒸汽平台的集换式卡牌效果制作的

新页面

<noinclude>
* 代码开源于[https://github.com/Salt-lovely/card-effect GitHub]。
* 这个卡片效果脚本并不自带CSS，请自行调用<code>Widget:SaltCardEffect/CSS</code>或者自己写{{tl|CSS}}。
** 这个默认样式'''需要各个图片高度一致'''才能达到正常的视觉效果。
<div class="salt-card-effect-detail">
[[file:青苹果勋章.png]]
[[file:红苹果勋章.png]]
[[file:金苹果勋章.png]]
[[file:附魔金苹果勋章.gif]]
</div>{{#Widget:SaltCardEffect/CSS}}{{#Widget:SaltCardEffect}}</noinclude><includeonly><script>
"use strict";
(() => {
// src/utils/h.ts
function handleChildren(children = []) {
const res = [];
const flattedChildren = children.flat(Infinity);
flattedChildren.forEach((child) => {
if (child instanceof Node)
res.push(child);
else if (typeof child === "string")
res.push(document.createTextNode(child));
else if (typeof child === "number")
res.push(document.createTextNode(`${child}`));
});
return res;
}
var h = (cmd, props, ...children) => {
if (typeof cmd === "string") {
const tag = cmd;
const el = document.createElement(tag);
if (props) {
for (const _attr in props) {
const attr = _attr.toLowerCase();
const value = props[_attr];
if (attr === "data" || attr === "dataset") {
if (value && typeof value === "object") {
for (const styleAttr in value) {
el.dataset[styleAttr] = value[styleAttr];
}
} else if (typeof value === "string") {
el.setAttribute(attr, value);
}
} else if (attr === "style") {
if (value && typeof value === "object") {
for (const styleAttr in value) {
el.style[styleAttr] = value[styleAttr];
}
} else if (typeof value === "string") {
el.setAttribute("style", value);
}
} else {
el[_attr] = value;
}
}
}
if (children == null ? void 0 : children.length)
handleChildren(children).forEach((child) => el.appendChild(child));
return el;
} else if (typeof cmd === "function") {
return cmd(props || {}, ...handleChildren(children));
} else {
throw new Error("请输入正确的标签名或生成方法");
}
};
var h_default = h;

// src/utils/utils.ts
function docReady(fn) {
if (document.readyState === "loading") {
window.addEventListener("DOMContentLoaded", () => {
if (document.readyState === "interactive")
fn();
});
} else {
fn();
}
}
function handleChildren2(props) {
const { queryContainer, queryElement, callback } = props;
const containers = Array.from(document.body.querySelectorAll(queryContainer));
containers.forEach((container) => {
container.classList.add("salt-done");
const elems = Array.from(container.querySelectorAll(queryElement)).filter((el) => el instanceof HTMLElement);
const res = elems.map((elem) => callback(elem));
container.innerHTML = "";
res.forEach((item) => container.appendChild(item));
});
}

// src/mouseEvent.ts
function mouseMoveDetailHandler(ev) {
console.log("mouseMove");
const { offsetWidth, offsetHeight } = this;
const { offsetX, offsetY } = ev;
const posX = offsetX / offsetWidth * 2 - 1;
const posY = offsetY / offsetHeight * 2 - 1;
const bright = 1 - posY * 0.18 - posX * 0.02;
const rotateX = 15 * posX;
const rotateY = 15 * posY;
this.style.transform = `rotateX(${-rotateY}deg) rotateY(${rotateX}deg)`;
this.style.filter = `brightness(${bright})`;
}
function mouseLeaveDetailHandler() {
this.style.transform = `rotateX(0deg) rotateY(0deg)`;
this.style.filter = `brightness(1)`;
}

// src/index.ts
if (window.parent !== window) {
console.error("这个脚本不允许在 iframe 等嵌入页面中运行！");
} else {
docReady(() => {
handleChildren2({
queryContainer: ".salt-card-effect-detail:not(.salt-done)",
queryElement: "img",
callback: (img) => {
img.classList.add("salt-card-img");
const container = h_default("div", {
className: "salt-card-container salt-card-container-detail"
});
const layer = h_default("div", { className: "salt-card-layer" });
container.appendChild(layer);
layer.appendChild(img);
img.addEventListener("mousemove", mouseMoveDetailHandler);
container.addEventListener("mouseleave", mouseLeaveDetailHandler.bind(img));
return container;
}
});
handleChildren2({
queryContainer: ".salt-card-effect-overview:not(.salt-done)",
queryElement: "img",
callback: (img) => {
img.classList.add("salt-card-img");
const container = h_default("div", {
className: "salt-card-container salt-card-container-overview"
});
const layer = h_default("div", { className: "salt-card-layer" });
container.appendChild(layer);
layer.appendChild(img);
return container;
}
});
});
}
})();
</script></includeonly>

微件:SaltCardEffect - 版本历史

Salt lovely：​仿照蒸汽平台的集换式卡牌效果制作的

Salt lovely：仿照蒸汽平台的集换式卡牌效果制作的