一切的故事,就由你来书写吧,总队长。
交错战线WIKI攻略组,NERI调查组诚招有志的你与我们一起书写百科全书
点击此处加入我们
一切的故事,就由你来书写吧,总队长。
交错战线WIKI攻略组,NERI调查组诚招有志的你与我们一起书写百科全书
点击此处加入我们
Widget:Spine哈托莉
<link rel="stylesheet" href="https://wiki.biligame.com/crosscore/MediaWiki:Spine-player.css?action=raw&ctype=text/css">
<script src="https://wiki.biligame.com/crosscore/MediaWiki:Spine-player.js?action=raw&ctype=text/javascript"></script>
<style>
/* 手机端样式 */
@media screen and (max-width: 600px) {
/* 设置触发盒子的 z-index 值,确保它在所有盒子的上面 */ #trigger-box { z-index: 9999; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -160%); width: 15%; height: 15%; cursor: pointer; } #spine-content{ position: relative; width: 100%; padding-bottom: 80%;
} }
/* 平板/桌面端样式 */ @media screen and (min-width: 601px) {
/* 设置触发盒子的 z-index 值,确保它在所有盒子的上面 */ #trigger-box { z-index: 9999; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15%; height: 15%; cursor: pointer; } #spine-content{ position: relative; width: 100%; padding-bottom: 56%;
} }
</style>
<script> // 初始化第一个动画(上层) document.getElementById('trigger-box').addEventListener('click', function() {
// 初始化第一个动画(上层)
new spine.SpinePlayer("player-container1", {
atlasUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Salticidae/50320_break_Salticidae.atlas", jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Salticidae/50320_break_Salticidae_character.skel.odg", showControls: false, // 隐藏播放器控件 animation: "idle",
alpha: true, // Enable player translucency
backgroundColor: "#00000000", viewport: { x: 0, y: 0, width: 1700, height: 1700, padLeft: "100%", padRight: "5%", padTop: "5%", padBottom: "5%" }
});
// 初始化第二个动画(下层) new spine.SpinePlayer("player-container2", {
atlasUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Salticidae/50320_break_Salticidae.atlas", jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Salticidae/50320_break_Salticidae_effect_B.skel.odg", showControls: false, // 隐藏播放器控件 animation: "idle",
alpha: true, // Enable player translucency
backgroundColor: "#00000000", viewport: { x: 0, y: 0, width: 1700, height: 1700, padLeft: "100%", padRight: "5%", padTop: "5%", padBottom: "5%" }
});
new spine.SpinePlayer("player-container3", {
atlasUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Salticidae/50320_break_Salticidae.atlas", jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Salticidae/50320_break_Salticidae_effect_F.skel.odg", showControls: false, // 隐藏播放器控件 animation: "idle",
alpha: true, // Enable player translucency
backgroundColor: "#00000000", viewport: { x: 0, y: 0, width: 1700, height: 1700, padLeft: "100%", padRight: "5%", padTop: "5%", padBottom: "5%" }
});
// 移除触发加载的盒子,避免重复加载 this.remove();
});
document.getElementById('trigger-box').addEventListener('touchstart', function() {
// 初始化第一个动画(上层) new spine.SpinePlayer("player-container1", {
atlasUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Salticidae/50320_break_Salticidae.atlas", jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Salticidae/50320_break_Salticidae_character.skel.odg", showControls: false, // 隐藏播放器控件 animation: "idle",
alpha: true, // Enable player translucency
backgroundColor: "#00000000", viewport: { x: 0, y: 0, width: 1700, height: 1700, padLeft: "100%", padRight: "5%", padTop: "5%", padBottom: "5%" }
});
// 初始化第二个动画(下层) new spine.SpinePlayer("player-container2", {
atlasUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Salticidae/50320_break_Salticidae.atlas", jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Salticidae/50320_break_Salticidae_effect_B.skel.odg", showControls: false, // 隐藏播放器控件 animation: "idle",
alpha: true, // Enable player translucency
backgroundColor: "#00000000", viewport: { x: 0, y: 0, width: 1700, height: 1700, padLeft: "100%", padRight: "5%", padTop: "5%", padBottom: "5%" }
});
new spine.SpinePlayer("player-container3", {
atlasUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Salticidae/50320_break_Salticidae.atlas", jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Salticidae/50320_break_Salticidae_effect_F.skel.odg", showControls: false, // 隐藏播放器控件 animation: "idle",
alpha: true, // Enable player translucency
backgroundColor: "#00000000", viewport: { x: 0, y: 0, width: 1700, height: 1700, padLeft: "100%", padRight: "5%", padTop: "5%", padBottom: "5%" }
});
// 移除触发加载的盒子,避免重复加载 this.remove();
});
</script>