一切的故事，就由你来书写吧，总队长。
交错战线WIKI攻略组，NERI调查组诚招有志的你与我们一起书写百科全书
点击此处加入我们

全站通知：

Widget:Spine袅韵

来自交错战线WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索


<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/Strum/20230_break_Strum.atlas",
   jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Strum/20230_break_Strum_character.skel",
   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/Strum/20230_break_Strum.atlas",
   jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Strum/20230_break_Strum_effect_B1.skel",
   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/Strum/20230_break_Strum.atlas",
   jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Strum/20230_break_Strum_effect_B2.skel",
   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/Strum/20230_break_Strum.atlas",
   jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Strum/20230_break_Strum_character.skel",
   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/Strum/20230_break_Strum.atlas",
   jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Strum/20230_break_Strum_effect_B1.skel",
   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/Strum/20230_break_Strum.atlas",
   jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/wiki-data/main/jczx/Strum/20230_break_Strum_effect_B2.skel",
   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>

取自“https://wiki.biligame.com/crosscore/index.php?title=Widget:Spine袅韵&oldid=17740”