Widget:GameSwitcher：修订间差异

←上一编辑下一编辑→

可视化wikitext

2026年6月20日 (六) 17:20的版本

本Widget为少女前线系列多游戏首页提供切换交互逻辑。不接受参数，直接在首页调用：{{#widget:GFHomepageSwitcher}}

@@ 第41行： / 第41行： @@
            || style.getPropertyValue( '--background-color-base' ).trim()
            || '#1d1e20';
-     var defs = {
+     var el = document.getElementById( 'gf-hero-fade-bottom' );
-      'gf-hero-fade-bottom': 'linear-gradient(to bottom, transparent 0%, ' + bg + ' 100%)',
+    if ( el ) {
-       'gf-hero-fade-left':   'linear-gradient(to right, '  + bg + ' 0%, transparent 100%)',
+       el.style.background = 'linear-gradient(to bottom, transparent 0%, ' + bg + ' 100%)';
-      'gf-hero-fade-right':  'linear-gradient(to left, '   + bg + ' 0%, transparent 100%)'
+     }
-    };
-     Object.keys( defs ).forEach( function ( id ) {
-      var el = document.getElementById( id );
-      if ( el ) { el.style.background = defs[ id ]; }
-    } );
    }
-  /* 当前正在显示的游戏，用于防止动画中途重复触发 */
    var currentGame = 'gf';
    var switching = false;
@@ 第60行： / 第54行： @@
      switching = true;
-     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' );
-     var tabs   = document.querySelectorAll( '#gf-homepage .gf-tab' );
+     var tabs    = document.querySelectorAll( '#gf-homepage .gf-tab' );
      var outSlide = document.getElementById( 'hero-' + currentGame );
      var inSlide  = document.getElementById( 'hero-' + game );
-    /* 新图先置于底层不透明度0，再淡入；旧图同时淡出 */
      if ( inSlide ) {
-       inSlide.style.zIndex   = '1';
+       inSlide.style.zIndex     = '1';
-       inSlide.style.opacity  = '0';
+       inSlide.style.opacity    = '0';
        inSlide.style.transition = 'opacity 0.5s ease';
-      /* 强制reflow让transition生效 */
        void inSlide.offsetWidth;
-       inSlide.style.opacity = '1';
+       inSlide.style.opacity    = '1';
      }
      if ( outSlide ) {
-       outSlide.style.zIndex    = '0';
+       outSlide.style.zIndex     = '0';
-       outSlide.style.opacity   = '1';
+       outSlide.style.opacity    = '1';
        outSlide.style.transition = 'opacity 0.5s ease';
        void outSlide.offsetWidth;
-       outSlide.style.opacity   = '0';
+       outSlide.style.opacity    = '0';
      }
-    /* 内容面板切换 */
      panels.forEach( function ( p ) {
        p.classList.toggle( 'active', p.id === 'content-' + game );
      } );
-    /* tab状态 */
      tabs.forEach( function ( t ) {
        var on = t.getAttribute( 'data-game' ) === game;
@@ 第96行： / 第86行： @@
      } );
-    /* 动画结束后清理zIndex，解除锁定 */
      setTimeout( function () {
        slides.forEach( function ( s ) {
-         s.style.zIndex    = '';
+         s.style.zIndex     = '';
-         s.style.opacity   = s.id === 'hero-' + game ? '1' : '0';
+         s.style.opacity    = s.id === 'hero-' + game ? '1' : '0';
          s.style.transition = '';
        } );
@@ 第112行： / 第101行： @@
      if ( !tabs.length ) { return; }
-     /* 预加载并注入背景图 */
+     /* 同时注入 bg（模糊层）和 fg（清晰层）*/
      Object.keys( heroImages ).forEach( function ( game ) {
        getWikiImageUrl( heroImages[ game ], function ( url ) {
-         var el = document.getElementById( 'hero-' + game );
+         var bg = document.getElementById( 'hero-' + game + '-bg' );
-         if ( el ) { el.style.backgroundImage = 'url("' + url + '")'; }
+         var fg = document.getElementById( 'hero-' + game + '-fg' );
+        var val = 'url("' + url + '")';
+        if ( bg ) { bg.style.backgroundImage = val; }
+        if ( fg ) { fg.style.backgroundImage = val; }
        } );
      } );