炼石百科

MediaWiki:Mobile.js：修订间差异

系统消息 讨论

MediaWiki:Mobile.js (查看源代码)

2025年12月19日 (五) 08:18的版本

删除4,365字节 、​ 周五08:18
无编辑摘要
无编辑摘要
标签：已被回退
无编辑摘要
标签：已被回退 移动版编辑 移动版网页编辑
第1行： 第1行：
// 移动端公告滚动效果
// 移动端公告滚动效果 - 修复版本
// 兼容 MobileFrontend 和桌面端
// 使用 transform 实现滚动，确保在移动端正常工作


(function() {
(function() {
     'use strict';
     'use strict';
   
    // 防止重复初始化
    var initialized = false;
    var scrollInterval = null;
      
      
     // 初始化公告滚动
     // 初始化公告滚动
     function initSiteNoticeScroll() {
     function initSiteNoticeScroll() {
         var self = $('#siteNoticeScroll');
         var self = $('#siteNoticeScroll');
         if (!self.length || !self[0]) return;
         if (!self.length || !self[0]) {
            return;
        }
          
          
         var ul = self.find('ul:first');
         var ul = self.find('ul:first');
         if (!ul.length) return;
         if (!ul.length) {
            return;
        }
          
          
         var lis = ul.find('li');
         var lis = ul.find('li');
       
         if (lis.length <= 1) {
        // 调试：打印所有 li 的内容
             return; // 如果只有一个或没有项目，不需要滚动
         if (typeof console !== 'undefined' && console.log) {
            console.log('找到 ' + lis.length + ' 个 li 元素:');
            lis.each(function(index) {
                console.log('li[' + index + ']: ' + $(this).text().trim());
             });
         }
         }
       
        // 检查并修复被分割的 li 元素
        // 如果第一个 li 包含"我们目前有"但不包含"次编辑"，说明被分割了
        if (lis.length > 0) {
            var firstLi = lis.eq(0);
            var firstText = firstLi.text().trim();
           
            // 检查第一个 li 是否被分割（包含"我们目前有"但不包含"次编辑"）
            if (firstText.indexOf('我们目前有') !== -1 && firstText.indexOf('次编辑') === -1) {
                // 查找下一个包含"次编辑"的 li
                for (var i = 1; i < lis.length; i++) {
                    var nextLi = lis.eq(i);
                    var nextText = nextLi.text().trim();
                   
                    // 如果下一个 li 包含"次编辑"但不包含"我们目前有"，说明是分割的部分
                    if (nextText.indexOf('次编辑') !== -1 && nextText.indexOf('我们目前有') === -1) {
                        // 合并内容
                        var combinedHtml = firstLi.html() + ' ' + nextLi.html();
                        firstLi.html(combinedHtml);
                        nextLi.remove(); // 删除被合并的 li
                        if (typeof console !== 'undefined' && console.log) {
                            console.log('合并了被分割的 li 元素');
                        }
                        break;
                    }
                }
            }
        }
       
        // 重新获取修复后的 li 列表
        lis = ul.find('li');
        if (lis.length <= 1) return; // 如果只有一个或没有项目，不需要滚动
          
          
         // 获取容器宽度（使用多种方法确保获取到）
         // 获取容器宽度（使用多种方法确保获取到）
         var containerWidth = self.width() || self[0].offsetWidth || self[0].clientWidth;
         var containerWidth = self.width() || self[0].offsetWidth || self[0].clientWidth;
         if (containerWidth === 0) {
         if (containerWidth === 0) {
             // 如果宽度为0，可能是DOM还未完全加载，延迟重试
             // 如果宽度为0，延迟重试
             setTimeout(initSiteNoticeScroll, 100);
             setTimeout(initSiteNoticeScroll, 100);
             return;
             return;
         }
         }
          
          
         // 设置 ul 宽度和初始 transform（使用 translate3d 启用 GPU 加速）
         // 设置 ul 宽度和初始 transform
         var totalWidth = containerWidth * lis.length;
         var totalWidth = containerWidth * lis.length;
         ul.css({
         ul.css({
第76行： 第47行：
             '-webkit-transform': 'translate3d(0, 0, 0)',
             '-webkit-transform': 'translate3d(0, 0, 0)',
             '-moz-transform': 'translate3d(0, 0, 0)',
             '-moz-transform': 'translate3d(0, 0, 0)',
             '-ms-transform': 'translateX(0px)',
             '-ms-transform': 'translate3d(0, 0, 0)',
             '-o-transform': 'translate3d(0, 0, 0)',
             '-o-transform': 'translate3d(0, 0, 0)',
             'transform': 'translate3d(0, 0, 0)',
             'transform': 'translate3d(0, 0, 0)',
第89行： 第60行：
         });
         });
          
          
         // 设置每个 li 的宽度和样式（防止换行，确保居中）
         // 设置每个 li 的宽度
         lis.each(function() {
         lis.css({
             var $li = $(this);
             'width': containerWidth + 'px',
            // 先设置宽度，确保不换行，内容居中
            'height': '25px',
            $li.css({
            'line-height': '25px',
                'width': containerWidth + 'px',
            'list-style': 'none',
                'height': '25px',
            'float': 'left',
                'line-height': '25px',
            'display': 'inline-block',
                'list-style': 'none',
            'box-sizing': 'border-box',
                'float': 'left',
            'padding': '0 10px',
                'display': 'inline-block',
            'vertical-align': 'top',
                'box-sizing': 'border-box',
            'flex-shrink': '0'
                'padding': '0',
                'margin': '0',
                'vertical-align': 'top',
                'flex-shrink': '0',
                'white-space': 'nowrap',
                'overflow': 'visible',
                'text-overflow': 'clip',
                'text-align': 'center',
                'word-break': 'keep-all',
                'word-wrap': 'normal',
                'max-width': containerWidth + 'px'
            });
           
            // 确保内容在 li 内居中
            var $content = $li.find('*').first();
            if ($content.length === 0) {
                // 如果没有子元素，直接设置 li 的文本对齐
                $li.css('text-align', 'center');
            } else {
                // 如果有子元素，确保子元素也居中
                $content.css({
                    'text-align': 'center',
                    'display': 'inline-block',
                    'width': '100%'
                });
            }
         });
         });
          
          
第132行： 第77行：
         ul[0].offsetHeight;
         ul[0].offsetHeight;
          
          
         // 清除之前的定时器（如果存在）
         // 清除之前的定时器
         var oldInterval = self.data('scrollInterval');
         if (scrollInterval) {
        if (oldInterval) {
             clearInterval(scrollInterval);
             clearInterval(oldInterval);
         }
         }
          
          
         // 开始滚动
         // 开始滚动
         var scrollInterval = window.setInterval(function() {
         scrollInterval = window.setInterval(function() {
             var dataset = ul[0].dataset;
             var dataset = ul[0].dataset;
             if (!dataset) return;
             if (!dataset) return;
第164行： 第108行：
                     '-webkit-transform': 'translate3d(0, 0, 0)',
                     '-webkit-transform': 'translate3d(0, 0, 0)',
                     '-moz-transform': 'translate3d(0, 0, 0)',
                     '-moz-transform': 'translate3d(0, 0, 0)',
                     '-ms-transform': 'translateX(0px)',
                     '-ms-transform': 'translate3d(0, 0, 0)',
                     '-o-transform': 'translate3d(0, 0, 0)',
                     '-o-transform': 'translate3d(0, 0, 0)',
                     'transform': 'translate3d(0, 0, 0)'
                     'transform': 'translate3d(0, 0, 0)'
第180行： 第124行：
                 }, 50);
                 }, 50);
             } else {
             } else {
                 // 正常滚动（使用 translate3d 启用 GPU 加速）
                 // 正常滚动
                 ul.css({
                 ul.css({
                     '-webkit-transition': 'transform 0.73s ease-in-out',
                     '-webkit-transition': 'transform 0.73s ease-in-out',
第197行： 第141行：
         }, 5000);
         }, 5000);
          
          
         // 窗口大小改变时重新计算（使用命名空间避免重复绑定）
         // 窗口大小改变时重新计算
         $(window).off('resize.siteNoticeScroll').on('resize.siteNoticeScroll', function() {
         $(window).on('resize.siteNoticeScroll', function() {
             containerWidth = self.width() || self[0].offsetWidth || self[0].clientWidth;
             containerWidth = self.width() || self[0].offsetWidth || self[0].clientWidth;
             if (containerWidth === 0) return;
             if (containerWidth === 0) return;
第204行： 第148行：
             var totalWidth = containerWidth * lis.length;
             var totalWidth = containerWidth * lis.length;
             ul.css('width', totalWidth + 'px');
             ul.css('width', totalWidth + 'px');
             lis.each(function() {
             lis.css('width', containerWidth + 'px');
                $(this).css({
                    'width': containerWidth + 'px',
                    'white-space': 'nowrap',
                    'overflow': 'hidden',
                    'text-overflow': 'ellipsis',
                    'text-align': 'center'
                });
            });
              
              
             var currentLeft = parseInt(ul[0].dataset.left) || 0;
             var currentLeft = parseInt(ul[0].dataset.left) || 0;
第218行： 第154行：
             var translateX = -(currentLeft * containerWidth);
             var translateX = -(currentLeft * containerWidth);
             ul.css({
             ul.css({
                '-webkit-transition': 'transform 0.37s ease-in-out',
                '-moz-transition': 'transform 0.37s ease-in-out',
                '-o-transition': 'transform 0.37s ease-in-out',
                'transition': 'transform 0.37s ease-in-out',
                 '-webkit-transform': 'translate3d(' + translateX + 'px, 0, 0)',
                 '-webkit-transform': 'translate3d(' + translateX + 'px, 0, 0)',
                 '-moz-transform': 'translate3d(' + translateX + 'px, 0, 0)',
                 '-moz-transform': 'translate3d(' + translateX + 'px, 0, 0)',
                 '-ms-transform': 'translateX(' + translateX + 'px)',
                 '-ms-transform': 'translateX(' + translateX + 'px)',
                 '-o-transform': 'translate3d(' + translateX + 'px, 0, 0)',
                 '-o-transform': 'translate3d(' + translateX + 'px, 0, 0)',
                 'transform': 'translate3d(' + translateX + 'px, 0, 0)'
                 'transform': 'translate3d(' + translateX + 'px, 0, 0)',
                '-webkit-transition': 'transform 0.37s ease-in-out',
                '-moz-transition': 'transform 0.37s ease-in-out',
                '-o-transition': 'transform 0.37s ease-in-out',
                'transition': 'transform 0.37s ease-in-out'
             });
             });
         });
         });
          
          
         // 保存 interval ID，以便后续清理
         // 保存 interval ID
         self.data('scrollInterval', scrollInterval);
         self.data('scrollInterval', scrollInterval);
     }
     }
第274行： 第210行：
         return true;
         return true;
     }
     }
   
    // 防止重复初始化
    var initialized = false;
      
      
     // 等待 DOM 和 MediaWiki 加载完成
     // 等待 DOM 和 MediaWiki 加载完成
第288行： 第221行：
         var promptAdded = initUserPrompt();
         var promptAdded = initUserPrompt();
          
          
         // 延迟初始化滚动效果，确保 DOM 完全更新和样式应用
         // 延迟初始化滚动效果，确保 DOM 完全更新
         setTimeout(function() {
         setTimeout(function() {
            // 再次确保所有 li 都有正确的样式（防止换行）
            var siteNoticeScroll = $('#siteNoticeScroll');
            if (siteNoticeScroll.length) {
                var ul = siteNoticeScroll.find('ul:first');
                if (ul.length) {
                    var lis = ul.find('li');
                    var containerWidth = siteNoticeScroll.width() || siteNoticeScroll[0].offsetWidth || siteNoticeScroll[0].clientWidth;
                    if (containerWidth > 0) {
                        lis.each(function() {
                            var $li = $(this);
                            $li.css({
                                'white-space': 'nowrap',
                                'overflow': 'hidden',
                                'text-overflow': 'ellipsis',
                                'text-align': 'center'
                            });
                        });
                    }
                }
            }
             initSiteNoticeScroll();
             initSiteNoticeScroll();
         }, promptAdded ? 200 : 100);
         }, promptAdded ? 200 : 100);
第327行： 第240行：
                     init();
                     init();
                 }
                 }
             }, 200);
             }, 300);
         }
         }
     } else {
     } else {
第334行： 第247行：
             document.addEventListener('DOMContentLoaded', function() {
             document.addEventListener('DOMContentLoaded', function() {
                 if (typeof $ !== 'undefined' && !initialized) {
                 if (typeof $ !== 'undefined' && !initialized) {
                     setTimeout(init, 100);
                     setTimeout(init, 200);
                 }
                 }
             });
             });
第357行： 第270行：
         mw.hook('mobile.init').add(function() {
         mw.hook('mobile.init').add(function() {
             if (!initialized) {
             if (!initialized) {
                 setTimeout(init, 200);
                 setTimeout(init, 300);
             }
             }
         });
         });
     }
     }
})();
})();
取自“http://lianshibaike.com/wiki/特殊:移动版差异/722”