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

Widget:GF立绘切换：修订间差异

来自OGAS数据中枢
更多操作
←上一编辑下一编辑→
弃权者​（留言 | 贡献）
界面管理员、​管理员
2,709次编辑
可视化wikitext
弃权者​（留言 | 贡献）
界面管理员、​管理员
2,709次编辑
无编辑摘要
弃权者​（留言 | 贡献）
界面管理员、​管理员
2,709次编辑
无编辑摘要
第10行： 第10行：
              
              
             if (!container || thumbItems.length < 2) return;
             if (!container || thumbItems.length < 2) return;
           
            // 获取缩略图中已渲染的图片URL，建立映射
            function getThumbImageUrl(thumbItem) {
                var img = thumbItem.querySelector('.gf-thumb-img img');
                if (img && img.src) {
                    // 从缩略图URL推导出大图URL
                    // 缩略图URL格式: /images/thumb/f/ff/文件名/60px-文件名
                    // 大图URL格式: /images/f/ff/文件名
                    var thumbSrc = img.src;
                   
                    // 移除缩略图路径中的 /thumb/ 和尺寸前缀
                    var fullSrc = thumbSrc.replace(/\/thumb\//, '/');
                    fullSrc = fullSrc.replace(/\/\d+px-/, '/');
                    // 移除可能的缩略图参数
                    fullSrc = fullSrc.replace(/\?.*$/, '');
                   
                    return fullSrc;
                }
                return null;
            }
              
              
             thumbItems.forEach(function(item) {
             thumbItems.forEach(function(item) {
                 item.addEventListener('click', function(e) {
                 item.addEventListener('click', function(e) {
                     e.preventDefault();
                     e.preventDefault();
                    e.stopPropagation();
                      
                      
                     // 更新激活状态
                     // 如果已经是激活状态，不做任何事
                     thumbItems.forEach(function(t) { t.classList.remove('active'); });
                     if (this.classList.contains('active')) return;
                    this.classList.add('active');
                      
                      
                    // 获取新图片文件名
                     var newImgUrl = getThumbImageUrl(this);
                     var newFile = this.dataset.img;
                     if (!newImgUrl) {
                     if (!newFile) return;
                        console.warn('Cannot get image URL from thumbnail');
                        return;
                    }
                      
                      
                     // 获取旧图片
                     // 预加载新图片
                     var oldImg = container.querySelector('img');
                     var preloadImg = new Image();
                    preloadImg.src = newImgUrl;
                      
                      
                     // 创建新图片
                     preloadImg.onload = function() {
                    var newImg = new Image();
                        // 获取旧图片
                    newImg.style.maxWidth = '100%';
                        var oldImg = container.querySelector('img');
                    newImg.style.maxHeight = '420px';
                       
                    newImg.style.objectFit = 'contain';
                        // 创建新图片元素
                    newImg.style.opacity = '0';
                        var newImg = document.createElement('img');
                    newImg.style.transition = 'opacity 0.35s ease';
                        newImg.src = newImgUrl;
                   
                        newImg.style.maxWidth = '100%';
                    newImg.onload = function() {
                        newImg.style.maxHeight = '420px';
                        newImg.style.objectFit = 'contain';
                        newImg.style.opacity = '0';
                        newImg.style.transition = 'opacity 0.3s ease';
                       
                         // 淡出旧图
                         // 淡出旧图
                         if (oldImg) {
                         if (oldImg) {
                            oldImg.style.transition = 'opacity 0.2s ease';
                             oldImg.style.opacity = '0';
                             oldImg.style.opacity = '0';
                            oldImg.style.transition = 'opacity 0.2s ease';
                         }
                         }
                          
                          
                         // 延迟替换
                         // 替换图片
                         setTimeout(function() {
                         container.innerHTML = '';
                            container.innerHTML = '';
                        container.appendChild(newImg);
                            container.appendChild(newImg);
                       
                        // 淡入新图
                        requestAnimationFrame(function() {
                             requestAnimationFrame(function() {
                             requestAnimationFrame(function() {
                                 newImg.style.opacity = '1';
                                 newImg.style.opacity = '1';
                             });
                             });
                         }, 200);
                         });
                       
                        // 更新激活状态
                        thumbItems.forEach(function(t) { t.classList.remove('active'); });
                        item.classList.add('active');
                     };
                     };
                      
                      
                     newImg.onerror = function() {
                     preloadImg.onerror = function() {
                         console.warn('Failed to load image: ' + newFile);
                         console.error('Failed to load image: ' + newImgUrl);
                        // 恢复旧图
                        if (oldImg) {
                            oldImg.style.opacity = '1';
                        }
                     };
                     };
                   
                    // 使用 MediaWiki 文件路径
                    // 如果文件名不含 File: 前缀，尝试构建路径
                    if (newFile.startsWith('File:') || newFile.startsWith('文件:')) {
                        newImg.src = newFile;
                    } else {
                        // 假设是 wiki 上的文件名
                        newImg.src = '/images/' + newFile;
                        // 备用：直接当作完整URL
                        newImg.onerror = function() {
                            newImg.src = newFile;
                        };
                    }
                 });
                 });
             });
             });

2026年5月15日 (五) 13:48的版本

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