MediaWiki:Common.js:修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| (未显示同一用户的4个中间版本) | |||
| 第24行: | 第24行: | ||
`); | `); | ||
mw.loader.using( ['mediawiki.util', 'mediawiki.api'] | mw.loader.using(['mediawiki.util', 'mediawiki.api']).then(function () { | ||
$(function () { | |||
$( function () { | var $el = $('#wiki-wordcount-number'); | ||
var $el = $( '#wiki-wordcount-number' ); | if (!$el.length) return; | ||
if ( !$el.length ) return; | |||
// 标记是否已触发过动画 | |||
var triggered = false; | |||
// | // IntersectionObserver 配置 | ||
var | var observer = new IntersectionObserver(function(entries) { | ||
entries.forEach(function(entry) { | |||
if (entry.isIntersecting && !triggered) { | |||
triggered = true; | |||
startCountAnimation(); | |||
observer.unobserve(entry.target); | |||
} | |||
}); | |||
}, { | |||
root: null, // 视口为浏览器窗口 | |||
rootMargin: "0px", | |||
threshold: 0.3 // 至少 30% 可见才触发 | |||
}); | |||
// 观察目标元素 | |||
observer.observe(document.getElementById('wiki-wordcount-number')); | |||
// 真正执行字数滚动动画 | |||
function startCountAnimation() { | |||
new mw.Api().get({ | |||
action: 'wordcounter', | |||
prop: 'totals', | |||
format: 'json' | |||
}).done(function (data) { | |||
// --- 修改点:适配您的 API 返回结构 --- | |||
var total = 0; | |||
if (data && data.wordcounter && data.wordcounter.totals) { | |||
total = data.wordcounter.totals.totalWords || 0; | |||
} | |||
// 缓动函数(前快后慢) | |||
function easeOutQuad(t) { | |||
return t * (2 - t); | |||
} | |||
var duration = 2000; | |||
var startTime = null; | |||
function animate(timestamp) { | |||
if (!startTime) startTime = timestamp; | |||
var run = timestamp - startTime; | |||
var progress = Math.min(run / duration, 1); | |||
var eased = easeOutQuad(progress); | |||
var currentVal = Math.floor(eased * total); | |||
$el.text(currentVal.toLocaleString()); | |||
if (progress < 1) { | |||
requestAnimationFrame(animate); | |||
} | |||
} | } | ||
requestAnimationFrame(animate); | |||
}).fail(function () { | |||
console.error('字数统计 API 请求失败'); | |||
}); | |||
} | |||
} ); | }); | ||
} ); | }); | ||