MediaWiki:Common.js:修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 标签:已被回退 |
无编辑摘要 标签:已被回退 |
||
| 第43行: | 第43行: | ||
}); | }); | ||
/* | /* 首页智能无缝轮播图 */ | ||
mw.hook('wikipage.content').add(function($content) { | mw.hook('wikipage.content').add(function($content) { | ||
$content.find('.dynamic-carousel').each(function() { | $content.find('.dynamic-carousel').each(function() { | ||
var $carousel = $(this); | var $carousel = $(this); | ||
var $track = $carousel.find('.carousel-track'); | var $track = $carousel.find('.carousel-track'); | ||
var $ | var $originalSlides = $track.find('.carousel-slide'); | ||
var | var originalCount = $originalSlides.length; | ||
// | // 如果图太少,就不折腾了 | ||
if ( | if (originalCount <= 1) { | ||
$ | $carousel.find('.carousel-btn, .carousel-dots').hide(); | ||
return; | return; | ||
} | } | ||
// - | // 核心魔术:偷偷把第一张图复制一份放到最后 | ||
var $firstClone = $originalSlides.first().clone(); | |||
// | $track.append($firstClone); | ||
for (var i = 0; i < | |||
var $dotsContainer = $carousel.find('.carousel-dots'); | |||
var currentIndex = 0; | |||
var isAnimating = false; // 防止你手速太快狂点按钮 | |||
var timer; | |||
// 生成底部圆点 | |||
for (var i = 0; i < originalCount; i++) { | |||
var $dot = $('<div class="dot"></div>'); | var $dot = $('<div class="dot"></div>'); | ||
if (i === 0) $dot.addClass('active'); | if (i === 0) $dot.addClass('active'); | ||
| 第75行: | 第74行: | ||
var $dots = $dotsContainer.find('.dot'); | var $dots = $dotsContainer.find('.dot'); | ||
// | // 更新圆点亮起状态 | ||
function updateDots(index) { | |||
$dots.removeClass('active'); | |||
if (index === originalCount) { | |||
$dots.eq(0).addClass('active'); // 如果滑到了假的第一张,亮起第一个圆点 | |||
} else { | |||
$dots.eq(index).addClass('active'); | |||
} | |||
} | |||
// | // 滑动控制中心 | ||
function goToSlide(index) { | function goToSlide(index) { | ||
// | if (isAnimating) return; | ||
isAnimating = true; | |||
// 打开滑动动画 | |||
$track.css('transition', 'transform 0.5s cubic-bezier(0.25, 1, 0.5, 1)'); | |||
// 如果在第一张还往左点,先瞬间传送到最后一张,再往前滑 | |||
if (index < 0) { | if (index < 0) { | ||
$track.css('transition', 'none'); | |||
} else | $track.css('transform', 'translateX(-' + (originalCount * 100) + '%)'); | ||
index | $track[0].offsetHeight; // 强制系统反应一下 | ||
$track.css('transition', 'transform 0.5s cubic-bezier(0.25, 1, 0.5, 1)'); | |||
currentIndex = originalCount - 1; | |||
} else { | |||
currentIndex = index; | |||
} | } | ||
var moveDistance = currentIndex * 100; | var moveDistance = currentIndex * 100; | ||
$track.css('transform', 'translateX(-' + moveDistance + '%)'); | $track.css('transform', 'translateX(-' + moveDistance + '%)'); | ||
updateDots(currentIndex); | |||
// | |||
$ | // 等动画播完(0.5秒),处理无缝衔接 | ||
setTimeout(function() { | |||
// 如果滑到了假的第一张,瞬间关掉动画,传回真正的第一张 | |||
if (currentIndex === originalCount) { | |||
$track.css('transition', 'none'); | |||
$track.css('transform', 'translateX(0)'); | |||
currentIndex = 0; | |||
} | |||
isAnimating = false; | |||
}, 500); | |||
} | } | ||
function startTimer() { | function startTimer() { | ||
clearInterval(timer); | clearInterval(timer); | ||
timer = setInterval(function() { | timer = setInterval(function() { | ||
goToSlide(currentIndex + 1); | goToSlide(currentIndex + 1); | ||
}, 5000); // | }, 5000); // 5秒自动切下一张 | ||
} | } | ||
// | // 按钮点击事件 | ||
$carousel.find('.next-btn').on('click', function() { | |||
$ | |||
goToSlide(currentIndex + 1); | goToSlide(currentIndex + 1); | ||
startTimer(); | startTimer(); | ||
}); | }); | ||
$carousel.find('.prev-btn').on('click', function() { | |||
$ | |||
goToSlide(currentIndex - 1); | goToSlide(currentIndex - 1); | ||
startTimer(); | startTimer(); | ||
}); | }); | ||
$dots.on('click', function() { | $dots.on('click', function() { | ||
if (isAnimating) return; | |||
goToSlide($(this).index()); | |||
startTimer(); | startTimer(); | ||
}); | }); | ||
startTimer(); | |||
startTimer(); | |||
}); | }); | ||
}); | }); | ||
2026年2月24日 (二) 16:13的版本
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/* 萌百风格 Tabs 自动转换脚本 */
$(function() {
$('.Tabs').each(function() {
var $tabsContainer = $(this);
// 1. 检查是否已经初始化过
if ($tabsContainer.hasClass('tabs-initialized')) return;
// 2. 提取所有的标签和内容
var $tabItems = $tabsContainer.find('> .Tab');
if ($tabItems.length === 0) return;
// 3. 创建标准的标签栏和内容容器
var $labelWrapper = $('<div class="TabLabel"></div>');
var $contentWrapper = $('<div class="TabContent"></div>');
$tabItems.each(function(index) {
var $item = $(this);
var $label = $item.find('> .TabLabelText');
var $content = $item.find('> .TabContentText');
// 给第一个设为选中
if (index === 0) {
$label.addClass('selected');
$content.addClass('selected');
}
// 绑定点击事件
$label.on('click', function() {
$labelWrapper.find('.TabLabelText').removeClass('selected');
$contentWrapper.find('.TabContentText').removeClass('selected');
$(this).addClass('selected');
$content.addClass('selected');
});
$labelWrapper.append($label);
$contentWrapper.append($content);
});
// 4. 清空原有的“散装”内容,插入标准结构
$tabsContainer.empty().append($labelWrapper).append($contentWrapper).addClass('tabs-initialized');
});
});
/* 首页智能无缝轮播图 */
mw.hook('wikipage.content').add(function($content) {
$content.find('.dynamic-carousel').each(function() {
var $carousel = $(this);
var $track = $carousel.find('.carousel-track');
var $originalSlides = $track.find('.carousel-slide');
var originalCount = $originalSlides.length;
// 如果图太少,就不折腾了
if (originalCount <= 1) {
$carousel.find('.carousel-btn, .carousel-dots').hide();
return;
}
// 核心魔术:偷偷把第一张图复制一份放到最后
var $firstClone = $originalSlides.first().clone();
$track.append($firstClone);
var $dotsContainer = $carousel.find('.carousel-dots');
var currentIndex = 0;
var isAnimating = false; // 防止你手速太快狂点按钮
var timer;
// 生成底部圆点
for (var i = 0; i < originalCount; i++) {
var $dot = $('<div class="dot"></div>');
if (i === 0) $dot.addClass('active');
$dotsContainer.append($dot);
}
var $dots = $dotsContainer.find('.dot');
// 更新圆点亮起状态
function updateDots(index) {
$dots.removeClass('active');
if (index === originalCount) {
$dots.eq(0).addClass('active'); // 如果滑到了假的第一张,亮起第一个圆点
} else {
$dots.eq(index).addClass('active');
}
}
// 滑动控制中心
function goToSlide(index) {
if (isAnimating) return;
isAnimating = true;
// 打开滑动动画
$track.css('transition', 'transform 0.5s cubic-bezier(0.25, 1, 0.5, 1)');
// 如果在第一张还往左点,先瞬间传送到最后一张,再往前滑
if (index < 0) {
$track.css('transition', 'none');
$track.css('transform', 'translateX(-' + (originalCount * 100) + '%)');
$track[0].offsetHeight; // 强制系统反应一下
$track.css('transition', 'transform 0.5s cubic-bezier(0.25, 1, 0.5, 1)');
currentIndex = originalCount - 1;
} else {
currentIndex = index;
}
var moveDistance = currentIndex * 100;
$track.css('transform', 'translateX(-' + moveDistance + '%)');
updateDots(currentIndex);
// 等动画播完(0.5秒),处理无缝衔接
setTimeout(function() {
// 如果滑到了假的第一张,瞬间关掉动画,传回真正的第一张
if (currentIndex === originalCount) {
$track.css('transition', 'none');
$track.css('transform', 'translateX(0)');
currentIndex = 0;
}
isAnimating = false;
}, 500);
}
function startTimer() {
clearInterval(timer);
timer = setInterval(function() {
goToSlide(currentIndex + 1);
}, 5000); // 5秒自动切下一张
}
// 按钮点击事件
$carousel.find('.next-btn').on('click', function() {
goToSlide(currentIndex + 1);
startTimer();
});
$carousel.find('.prev-btn').on('click', function() {
goToSlide(currentIndex - 1);
startTimer();
});
$dots.on('click', function() {
if (isAnimating) return;
goToSlide($(this).index());
startTimer();
});
startTimer();
});
});