打开/关闭搜索
打开/关闭菜单
26
6679
46
1.2万
OGAS数据中枢
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

Widget:GameSwitcher：修订间差异

来自OGAS数据中枢
更多操作
←上一编辑
弃权者​（留言 | 贡献）
界面管理员、​管理员
3,317次编辑
可视化wikitext
弃权者​（留言 | 贡献）
界面管理员、​管理员
3,317次编辑
无编辑摘要
弃权者​（留言 | 贡献）
界面管理员、​管理员
3,317次编辑
无编辑摘要
标签：手工回退
 
（未显示同一用户的6个中间版本）
第1行： 第1行：
<noinclude>
<noinclude>
本Widget为少女前线系列多游戏首页提供切换交互逻辑。
少女前线系列多游戏首页切换Widget。调用方式：<code><nowiki>{{#widget:GameSwitcher}}</nowiki></code>
不接受参数，直接在首页调用：<code><nowiki>{{#widget:GFHomepageSwitcher}}</nowiki></code>
</noinclude><includeonly><script>
</noinclude><includeonly><script>
( function () {
( function () {
第47行： 第46行：
   }
   }


  /* 滑动指示器：根据当前active tab的位置和宽度移动 */
function moveIndicator( tab ) {
  function moveIndicator( tab ) {
  var indicator = document.getElementById( 'gf-tab-indicator' );
    var indicator = document.getElementById( 'gf-tab-indicator' );
  if ( !indicator ) { return; }
    var switcher = document.getElementById( 'gf-switcher' );
  indicator.style.width     = tab.offsetWidth + 'px';
    if ( !indicator || !switcher ) { return; }
  indicator.style.transform = 'translateX(' + tab.offsetLeft + 'px)';
    var switcherRect = switcher.getBoundingClientRect();
}
    var tabRect = tab.getBoundingClientRect();
    indicator.style.width = tabRect.width + 'px';
    indicator.style.transform = 'translateX(' + ( tabRect.left - switcherRect.left ) + 'px)';
  }


   var currentGame = 'gf';
   var currentGame = 'gf';
   var switching = false;
   var switching   = false;
 
   var pending     = null;
   function switchGame( game, tabEl ) {
    if ( game === currentGame || switching ) { return; }
     switching = true;


  function doSwitch( game, tabEl ) {
     var slides = document.querySelectorAll( '#gf-homepage .gf-hero-slide' );
     var slides = document.querySelectorAll( '#gf-homepage .gf-hero-slide' );
     var panels = document.querySelectorAll( '#gf-homepage .gf-content-panel' );
     var panels = document.querySelectorAll( '#gf-homepage .gf-content-panel' );
第72行： 第65行：
     var inSlide  = document.getElementById( 'hero-' + game );
     var inSlide  = document.getElementById( 'hero-' + game );


    /* 先把新slide的fg重置为缩放状态，让Ken Burns重新触发 */
    if ( inSlide ) {
      var inFg = inSlide.querySelector( '.gf-hero-fg' );
      if ( inFg ) {
        inFg.style.transition = 'none';
        inFg.style.transform = window.innerWidth > 1200
          ? 'translateX(-50%) scale(1.06)'
          : 'scale(1.06)';
        void inFg.offsetWidth;
        inFg.style.transition = '';
      }
    }
    /* 交叉淡入淡出 */
     if ( inSlide ) {
     if ( inSlide ) {
       inSlide.style.zIndex = '1';
       inSlide.style.zIndex = '1';
第95行： 第74行：
     }
     }


    /* tab状态 */
     tabs.forEach( function ( t ) {
     tabs.forEach( function ( t ) {
       var on = t.getAttribute( 'data-game' ) === game;
       var on = t.getAttribute( 'data-game' ) === game;
第101行： 第79行：
       t.setAttribute( 'aria-selected', on ? 'true' : 'false' );
       t.setAttribute( 'aria-selected', on ? 'true' : 'false' );
     } );
     } );
    /* 滑动指示器 */
     if ( tabEl ) { moveIndicator( tabEl ); }
     if ( tabEl ) { moveIndicator( tabEl ); }


    /* 内容面板 */
     panels.forEach( function ( p ) {
     panels.forEach( function ( p ) {
       p.classList.toggle( 'active', p.id === 'content-' + game );
       p.classList.toggle( 'active', p.id === 'content-' + game );
     } );
     } );
    currentGame = game;
    switching  = true;


     setTimeout( function () {
     setTimeout( function () {
       slides.forEach( function ( s ) {
       slides.forEach( function ( s ) { s.style.zIndex = ''; } );
        s.style.zIndex = '';
      switching = false;
      if ( pending && pending.game !== currentGame ) {
        var p = pending;
        pending = null;
        doSwitch( p.game, p.tabEl );
      } else {
        pending = null;
      }
    }, 520 );
  }
 
  function switchGame( game, tabEl ) {
    if ( game === currentGame ) { return; }
    if ( switching ) {
      pending = { game: game, tabEl: tabEl };
      var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );
      tabs.forEach( function ( t ) {
        var on = t.getAttribute( 'data-game' ) === game;
        t.classList.toggle( 'active', on );
        t.setAttribute( 'aria-selected', on ? 'true' : 'false' );
       } );
       } );
       currentGame = game;
       if ( tabEl ) { moveIndicator( tabEl ); }
       switching = false;
       return;
     }, 720 );
     }
    doSwitch( game, tabEl );
   }
   }


第123行： 第121行：
     if ( !tabs.length ) { return; }
     if ( !tabs.length ) { return; }


    /* 注入背景图 */
     Object.keys( heroImages ).forEach( function ( game ) {
     Object.keys( heroImages ).forEach( function ( game ) {
       getWikiImageUrl( heroImages[ game ], function ( url ) {
       getWikiImageUrl( heroImages[ game ], function ( url ) {
         var bg = document.getElementById( 'hero-' + game + '-bg' );
         var bg = document.getElementById( 'hero-' + game + '-bg' );
         var fg = document.getElementById( 'hero-' + game + '-fg' );
         var fg = document.getElementById( 'hero-' + game + '-fg' );
         var val = 'url("' + url + '")';
         var val = 'url("' + url + '")';
         if ( bg ) { bg.style.backgroundImage = val; }
         if ( bg ) { bg.style.backgroundImage = val; }
第136行： 第133行：
     applyFadeColor();
     applyFadeColor();


    /* 初始化指示器位置 */
     var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );
     var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );
     if ( firstActive ) {
     if ( firstActive ) {
      /* 等布局稳定后再计算 */
       setTimeout( function () { moveIndicator( firstActive ); }, 50 );
       setTimeout( function () { moveIndicator( firstActive ); }, 50 );
     }
     }
第155行： 第150行：
     } );
     } );


    /* 窗口resize时重新定位指示器 */
     window.addEventListener( 'resize', function () {
     window.addEventListener( 'resize', function () {
       var active = document.querySelector( '#gf-homepage .gf-tab.active' );
       var active = document.querySelector( '#gf-homepage .gf-tab.active' );

2026年6月20日 (六) 23:23的最新版本

少女前线系列多游戏首页切换Widget。调用方式：{{#widget:GameSwitcher}}

检索自“https://gf-ogas.wiki/index.php?title=Widget:GameSwitcher&oldid=18933”
最后修改时间
此页面最后编辑于2026年6月20日 (星期六) 23:23。
著作权
OGAS数据中枢是由《少女前线》系列作品爱好者创建的非官方网站。
网站内涉及的商标、游戏素材、剧情文本等，其版权均属于散爆网络。
除非另有声明，本网站其他内容采用知识共享署名-非商业性使用-相同方式共享授权。