-
汇聚密码安全智慧 共享实战经验!
- 我们目前有643个页面,13个用户,731次编辑。
MediaWiki:Mobile.js
跳转到导航
跳转到搜索
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Internet Explorer或Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
- Opera:按 Ctrl-F5。
// 移动端公告滚动效果
// 兼容 MobileFrontend 和桌面端
(function() {
'use strict';
// 初始化公告滚动
function initSiteNoticeScroll() {
var self = $('#siteNoticeScroll');
if (!self.length || !self[0]) return;
var ul = self.find('ul:first');
if (!ul.length) return;
var lis = ul.find('li');
// 调试:打印所有 li 的内容
if (typeof console !== 'undefined' && console.log) {
console.log('[SiteNotice] 找到 ' + lis.length + ' 个 li 元素:');
for (var idx = 0; idx < lis.length; idx++) {
var $li = lis.eq(idx);
var text = $li.text().trim();
console.log('[SiteNotice] li[' + idx + ']: "' + text + '"');
}
}
// 检查并修复被分割的 li 元素
// 如果第一个 li 包含"我们目前有"但不包含"次编辑",说明被分割了
if (lis.length > 0) {
var firstLi = lis.eq(0);
var firstText = firstLi.text().trim();
if (typeof console !== 'undefined' && console.log) {
console.log('[SiteNotice] 第一个 li 内容: "' + firstText + '"');
console.log('[SiteNotice] 包含"我们目前有": ' + (firstText.indexOf('我们目前有') !== -1));
console.log('[SiteNotice] 包含"次编辑": ' + (firstText.indexOf('次编辑') !== -1));
}
// 检查第一个 li 是否被分割(包含"我们目前有"但不包含"次编辑")
if (firstText.indexOf('我们目前有') !== -1 && firstText.indexOf('次编辑') === -1) {
if (typeof console !== 'undefined' && console.log) {
console.log('[SiteNotice] 检测到第一个 li 被分割,开始查找需要合并的部分');
}
// 查找下一个包含"次编辑"的 li
for (var i = 1; i < lis.length; i++) {
var nextLi = lis.eq(i);
var nextText = nextLi.text().trim();
if (typeof console !== 'undefined' && console.log) {
console.log('[SiteNotice] 检查 li[' + i + ']: "' + nextText + '"');
}
// 如果下一个 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('[SiteNotice] 合并了被分割的 li 元素,合并后内容: "' + firstLi.text().trim() + '"');
}
break;
}
}
}
}
// 重新获取修复后的 li 列表
lis = ul.find('li');
if (typeof console !== 'undefined' && console.log) {
console.log('[SiteNotice] 修复后共有 ' + lis.length + ' 个 li 元素');
for (var idx = 0; idx < lis.length; idx++) {
var $li = lis.eq(idx);
var text = $li.text().trim();
console.log('[SiteNotice] 修复后 li[' + idx + ']: "' + text + '"');
}
}
if (lis.length <= 1) return; // 如果只有一个或没有项目,不需要滚动
// 获取容器宽度(使用多种方法确保获取到)
var containerWidth = self.width() || self[0].offsetWidth || self[0].clientWidth;
if (containerWidth === 0) {
// 如果宽度为0,可能是DOM还未完全加载,延迟重试
setTimeout(initSiteNoticeScroll, 100);
return;
}
// 设置 ul 宽度和初始 transform(使用 translate3d 启用 GPU 加速)
var totalWidth = containerWidth * lis.length;
ul.css({
'width': totalWidth + 'px',
'height': '25px',
'margin': '0',
'padding': '0',
'list-style': 'none',
'display': 'block',
'position': 'relative',
'white-space': 'nowrap',
'-webkit-transform': 'translate3d(0, 0, 0)',
'-moz-transform': 'translate3d(0, 0, 0)',
'-ms-transform': 'translateX(0px)',
'-o-transform': 'translate3d(0, 0, 0)',
'transform': 'translate3d(0, 0, 0)',
'-webkit-transition': 'transform 0.73s ease-in-out',
'-moz-transition': 'transform 0.73s ease-in-out',
'-o-transition': 'transform 0.73s ease-in-out',
'transition': 'transform 0.73s ease-in-out',
'will-change': 'transform'
}).attr({
'data-left': 0,
'data-length': lis.length
});
// 设置每个 li 的宽度和样式(防止换行,确保居中)
lis.each(function() {
var $li = $(this);
// 使用 attr 设置 style 属性,确保样式优先级最高
var styleStr = 'width: ' + containerWidth + 'px !important; ' +
'height: 25px !important; ' +
'line-height: 25px !important; ' +
'list-style: none !important; ' +
'float: left !important; ' +
'display: inline-block !important; ' +
'box-sizing: border-box !important; ' +
'padding: 0 !important; ' +
'margin: 0 !important; ' +
'vertical-align: top !important; ' +
'flex-shrink: 0 !important; ' +
'white-space: nowrap !important; ' +
'overflow: visible !important; ' +
'text-overflow: clip !important; ' +
'text-align: center !important; ' +
'word-break: keep-all !important; ' +
'word-wrap: normal !important; ' +
'max-width: ' + containerWidth + 'px !important; ' +
'position: relative !important;';
$li.attr('style', styleStr);
// 确保所有子元素(包括 strong、a、font 等)都不会换行
$li.find('*').each(function() {
var $elem = $(this);
$elem.attr('style',
'white-space: nowrap !important; ' +
'display: inline !important; ' +
'text-align: center !important;'
);
});
});
// 强制重绘
ul[0].offsetHeight;
// 清除之前的定时器(如果存在)
var oldInterval = self.data('scrollInterval');
if (oldInterval) {
clearInterval(oldInterval);
}
// 开始滚动
var scrollInterval = window.setInterval(function() {
var dataset = ul[0].dataset;
if (!dataset) return;
var currentLeft = parseInt(dataset.left) || 0;
var totalLength = parseInt(dataset.length) || lis.length;
var newLeft = currentLeft + 1;
// 如果到达最后一个,重置到第一个(索引0)
if (newLeft >= totalLength) {
newLeft = 0;
}
var translateX = -(newLeft * containerWidth);
// 重置时先移除 transition,立即跳转,然后恢复
if (newLeft === 0) {
// 先移除 transition,立即跳转
ul.css({
'-webkit-transition': 'none',
'-moz-transition': 'none',
'-o-transition': 'none',
'transition': 'none',
'-webkit-transform': 'translate3d(0, 0, 0)',
'-moz-transform': 'translate3d(0, 0, 0)',
'-ms-transform': 'translateX(0px)',
'-o-transform': 'translate3d(0, 0, 0)',
'transform': 'translate3d(0, 0, 0)'
});
// 强制重绘
ul[0].offsetHeight;
// 恢复 transition
setTimeout(function() {
ul.css({
'-webkit-transition': 'transform 0.73s ease-in-out',
'-moz-transition': 'transform 0.73s ease-in-out',
'-o-transition': 'transform 0.73s ease-in-out',
'transition': 'transform 0.73s ease-in-out'
});
}, 50);
} else {
// 正常滚动(使用 translate3d 启用 GPU 加速)
ul.css({
'-webkit-transition': 'transform 0.73s ease-in-out',
'-moz-transition': 'transform 0.73s ease-in-out',
'-o-transition': 'transform 0.73s ease-in-out',
'transition': 'transform 0.73s ease-in-out',
'-webkit-transform': 'translate3d(' + translateX + 'px, 0, 0)',
'-moz-transform': 'translate3d(' + translateX + 'px, 0, 0)',
'-ms-transform': 'translateX(' + translateX + 'px)',
'-o-transform': 'translate3d(' + translateX + 'px, 0, 0)',
'transform': 'translate3d(' + translateX + 'px, 0, 0)'
});
}
dataset.left = newLeft;
}, 5000);
// 窗口大小改变时重新计算(使用命名空间避免重复绑定)
$(window).off('resize.siteNoticeScroll').on('resize.siteNoticeScroll', function() {
containerWidth = self.width() || self[0].offsetWidth || self[0].clientWidth;
if (containerWidth === 0) return;
var totalWidth = containerWidth * lis.length;
ul.css('width', totalWidth + 'px');
lis.each(function() {
var $li = $(this);
var styleStr = 'width: ' + containerWidth + 'px !important; ' +
'white-space: nowrap !important; ' +
'overflow: visible !important; ' +
'text-overflow: clip !important; ' +
'text-align: center !important;';
$li.attr('style', styleStr);
});
var currentLeft = parseInt(ul[0].dataset.left) || 0;
if (currentLeft < 0) currentLeft = 0;
var translateX = -(currentLeft * containerWidth);
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)',
'-moz-transform': 'translate3d(' + translateX + 'px, 0, 0)',
'-ms-transform': 'translateX(' + translateX + 'px)',
'-o-transform': 'translate3d(' + translateX + 'px, 0, 0)',
'transform': 'translate3d(' + translateX + 'px, 0, 0)'
});
});
// 保存 interval ID,以便后续清理
self.data('scrollInterval', scrollInterval);
}
// 初始化用户提示
function initUserPrompt() {
var siteNoticeScroll = $('#siteNoticeScroll');
if (siteNoticeScroll.length === 0) {
return false;
}
var ul = siteNoticeScroll.find('ul:first');
if (ul.length === 0) {
return false;
}
var currentUser = null;
try {
if (typeof mw !== 'undefined' && mw.config && mw.config.get) {
currentUser = mw.config.get('wgUserName');
}
} catch (e) {
// 忽略错误
}
var promptElement = $('#userPrompt');
// 如果页面没有 userPrompt 元素,创建一个
if (promptElement.length === 0) {
promptElement = $('<li id="userPrompt"></li>');
ul.append(promptElement);
}
// 设置内容
if (currentUser && currentUser !== null && currentUser !== '') {
// 已登录用户
promptElement.html('<strong>欢迎回来,' + currentUser + '!感谢您对炼石百科的贡献!</strong>');
} else {
// 未登录用户
promptElement.html('<strong>欢迎加入炼石百科<a href="/wiki/Special:用户登录"><font color="#3862AE">注册一个账号</font></a>,一起参与编写吧!</strong>');
}
return true;
}
// 防止重复初始化
var initialized = false;
// 等待 DOM 和 MediaWiki 加载完成
function init() {
if (initialized) {
return; // 防止重复初始化
}
initialized = true;
// 先初始化用户提示(必须在滚动初始化之前)
var promptAdded = initUserPrompt();
// 延迟初始化滚动效果,确保 DOM 完全更新和样式应用
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();
}, promptAdded ? 200 : 100);
}
// 多种初始化方式,确保在移动端和桌面端都能工作
if (typeof $ !== 'undefined') {
// jQuery 已加载
$(document).ready(function() {
init();
});
// 如果已经在 ready 状态,延迟执行(避免重复)
if (document.readyState === 'complete' || document.readyState === 'interactive') {
setTimeout(function() {
if (!initialized) {
init();
}
}, 200);
}
} else {
// 等待 jQuery 加载
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
if (typeof $ !== 'undefined' && !initialized) {
setTimeout(init, 100);
}
});
} else {
// 如果 DOM 已加载,等待 jQuery
var checkJQuery = setInterval(function() {
if (typeof $ !== 'undefined' && !initialized) {
clearInterval(checkJQuery);
init();
}
}, 100);
// 10秒后停止检查
setTimeout(function() {
clearInterval(checkJQuery);
}, 10000);
}
}
// 使用 MediaWiki 的 hook(如果可用)
if (typeof mw !== 'undefined' && mw.hook) {
mw.hook('mobile.init').add(function() {
if (!initialized) {
setTimeout(init, 200);
}
});
}
})();