MediaWiki:Common.js:修订间差异
来自Fuckrooms Wiki
无编辑摘要 标签:已被回退 |
Defaultuser6(留言 | 贡献) 无编辑摘要 |
||
| (未显示3个用户的20个中间版本) | |||
| 第1行: | 第1行: | ||
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */ | |||
// console.log("Hello World!"); | |||
/* CSS模板 */ | |||
(function() { | (function() { | ||
var importCssDivs = document.querySelectorAll('div.import-css'); | var importCssDivs = document.querySelectorAll('div.import-css'); | ||
| 第14行: | 第18行: | ||
}); | }); | ||
})(); | })(); | ||
( | /* 落叶特效 */ | ||
(function(){ | |||
if (!document.getElementById('snow-style')) { | if (!document.getElementById('snow-style')) { | ||
const style = document.createElement('style'); | const style = document.createElement('style'); | ||
style.id = 'snow-style'; | style.id = 'snow-style'; | ||
style.textContent = ` | style.textContent = ` | ||
@keyframes | @keyframes snowRise { | ||
0% { transform: translateY( | 0% { | ||
100% { transform: translateY(calc( | transform: translateY(0) rotate(0deg); | ||
bottom: -130px; | |||
} | |||
100% { | |||
transform: translateY(-100vh) rotate(80deg); | |||
bottom: calc(100% + 130px); | |||
} | |||
} | } | ||
.snowflake { | .snowflake { | ||
position: fixed; | position: fixed; | ||
bottom: -130px; | |||
z-index: 9999; | z-index: 9999; | ||
pointer-events: none; | pointer-events: none; | ||
user-select: none; | user-select: none; | ||
animation-timing-function: linear; | animation-timing-function: linear; | ||
will-change: transform; | |||
} | } | ||
`; | `; | ||
document.head.appendChild(style); | document.head.appendChild(style); | ||
} | } | ||
function createSnowflake() { | function createSnowflake() { | ||
const snowflake = document.createElement('div'); | const snowflake = document.createElement('div'); | ||
snowflake.className = 'snowflake'; | snowflake.className = 'snowflake'; | ||
const icons = [' | const icons = ['🎂','🎂']; | ||
snowflake.innerHTML = icons[Math.floor(Math.random() * | snowflake.innerHTML = icons[Math.floor(Math.random() * icons.length)]; | ||
const size = Math.random() * | const size = Math.random() * 32 + 8; | ||
const left = Math.random() * 100; | const left = Math.random() * 100; | ||
const duration = Math.random() * 8 + 8; | const duration = Math.random() * 8 + 8; | ||
| 第47行: | 第59行: | ||
font-size: ${size}px; | font-size: ${size}px; | ||
left: ${left}%; | left: ${left}%; | ||
animation: | animation: snowRise ${duration}s linear forwards; | ||
opacity: ${Math.random() * 0.5 + 0.5}; | opacity: ${Math.random() * 0.5 + 0.5}; | ||
color: hsl(${Math.random() * 360}, 100%, 90%); | color: hsl(${Math.random() * 360}, 100%, 90%); | ||
`; | `; | ||
// 确保动画结束后移除元素 | |||
const removeSnowflake = () => { | |||
snowflake.remove(); | snowflake.remove(); | ||
}); | snowflake.removeEventListener('animationend', removeSnowflake); | ||
}; | |||
snowflake.addEventListener('animationend', removeSnowflake); | |||
document.body.appendChild(snowflake); | document.body.appendChild(snowflake); | ||
} | } | ||
let interval = setInterval(createSnowflake, 250); | let interval = setInterval(createSnowflake, 250); | ||
document.addEventListener('visibilitychange', function() { | document.addEventListener('visibilitychange', function() { | ||
if (document.hidden) { | if (document.hidden) { | ||
| 第72行: | 第84行: | ||
}); | }); | ||
// 初始创建雪花 | |||
for (let i = 0; i < 10; i++) { | for (let i = 0; i < 10; i++) { | ||
createSnowflake(); | createSnowflake(); | ||
} | } | ||
})(); | })(); | ||
2025年8月8日 (五) 15:10的最新版本
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
// console.log("Hello World!");
/* CSS模板 */
(function() {
var importCssDivs = document.querySelectorAll('div.import-css');
importCssDivs.forEach(function(div) {
var cssContent = div.textContent || div.innerText;
if (cssContent) {
var styleTag = document.createElement('style');
styleTag.type = 'text/css';
styleTag.appendChild(document.createTextNode(cssContent));
document.head.appendChild(styleTag);
}
});
})();
/* 落叶特效 */
(function(){
if (!document.getElementById('snow-style')) {
const style = document.createElement('style');
style.id = 'snow-style';
style.textContent = `
@keyframes snowRise {
0% {
transform: translateY(0) rotate(0deg);
bottom: -130px;
}
100% {
transform: translateY(-100vh) rotate(80deg);
bottom: calc(100% + 130px);
}
}
.snowflake {
position: fixed;
bottom: -130px;
z-index: 9999;
pointer-events: none;
user-select: none;
animation-timing-function: linear;
will-change: transform;
}
`;
document.head.appendChild(style);
}
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
const icons = ['🎂','🎂'];
snowflake.innerHTML = icons[Math.floor(Math.random() * icons.length)];
const size = Math.random() * 32 + 8;
const left = Math.random() * 100;
const duration = Math.random() * 8 + 8;
snowflake.style.cssText = `
font-size: ${size}px;
left: ${left}%;
animation: snowRise ${duration}s linear forwards;
opacity: ${Math.random() * 0.5 + 0.5};
color: hsl(${Math.random() * 360}, 100%, 90%);
`;
// 确保动画结束后移除元素
const removeSnowflake = () => {
snowflake.remove();
snowflake.removeEventListener('animationend', removeSnowflake);
};
snowflake.addEventListener('animationend', removeSnowflake);
document.body.appendChild(snowflake);
}
let interval = setInterval(createSnowflake, 250);
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
clearInterval(interval);
} else {
interval = setInterval(createSnowflake, 250);
}
});
// 初始创建雪花
for (let i = 0; i < 10; i++) {
createSnowflake();
}
})();