全站通知：
Widget:Christmas
刷
历
编
跳到导航
跳到搜索
<!DOCTYPE html> <html lang="zh">
<head>
<meta charset="UTF-8">
<title>BWiki 装饰元素</title>
<style>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 固定元素的基础样式 */
.bwiki-fixed-element {
position: fixed;
z-index: 1000;
pointer-events: none;
width: 300px;
height: 300px;
transition: transform 0.3s ease;
}
/* 图片包裹层基础样式 */
.bwiki-image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: visible;
}
/* 事件监听盒子 */
.bwiki-event-box {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 1;
pointer-events: auto;
}
[class*="bwiki-decor-l"] .bwiki-event-box {
left: 0;
width: calc(300px * var(--img-scale-left));
height: calc(300px * var(--img-scale-left));
}
[class*="bwiki-decor-r"] .bwiki-event-box {
right: 0;
width: calc(300px * var(--img-scale-right));
height: calc(300px * var(--img-scale-right));
}
/* 图片基础样式 */
.bwiki-image-wrapper img {
position: absolute;
top: 50%;
width: 300px;
height: auto;
object-fit: contain;
pointer-events: none;
transform: translateY(-50%) scale(var(--img-scale));
will-change: transform;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 左侧元素样式 */
[class*="bwiki-decor-l"] {
left: 0;
transform-origin: left center;
}
/* 右侧元素样式 */
[class*="bwiki-decor-r"] {
right: 0;
transform-origin: right center;
}
/* 左侧元素图片样式 */
[class*="bwiki-decor-l"] img {
left: 0;
transform: translateY(-50%) scale(var(--img-scale-left));
transform-origin: left center;
}
/* 右侧元素图片样式 */
[class*="bwiki-decor-r"] img {
right: 0;
transform: translateY(-50%) scale(var(--img-scale-right));
transform-origin: right center;
}
/* 左侧元素位置 */
.bwiki-decor-l1, .bwiki-decor-r1 { top: 25%; }
/* 左侧元素位置 */
.bwiki-decor-l2, .bwiki-decor-r2 { top: 55%; }
/* GIF图片样式 */
[class*="bwiki-decor-l"] img[src$='.gif'] {
transform: translateY(-50%) scale(var(--gif-scale-left)) !important;
}
[class*="bwiki-decor-r"] img[src$='.gif'] {
transform: translateY(-50%) scale(var(--gif-scale-right)) !important;
}
/* 摇摆动画 */
@keyframes decorSwing {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(var(--swing-angle)); }
}
/* 动画应用 */
[class*="bwiki-decor-l"]:not(.collapsed) {
animation: decorSwing 3s ease-in-out infinite;
--swing-angle: 8deg;
}
[class*="bwiki-decor-r"]:not(.collapsed) {
animation: decorSwing 3s ease-in-out infinite;
--swing-angle: -8deg;
}
/* 延迟动画 */
.bwiki-decor-l2:not(.collapsed),
.bwiki-decor-r2:not(.collapsed) {
animation-delay: 1.5s;
}
/* 收起状态 */
.collapsed[class*="bwiki-decor-l"] {
transform: translateX(calc(-300px * var(--img-scale-left) + 15px));
animation: none;
}
.collapsed[class*="bwiki-decor-r"] {
transform: translateX(calc(300px * var(--img-scale-right) - 15px));
animation: none;
}
/* 顶部元素 */
.bwiki-decor-top {
position: absolute;
top: 50px;
left: 0;
width: 100%;
height: 90px;
background: url('https://patchwiki.biligame.com/images/lysk/4/4d/44gsngalmerwb4ly9u1p8k1ugk56lti.png') repeat-x;
background-size: auto 100%;
}
/* 文本提示样式 */
.bwiki-text-display {
position: absolute;
top: 30px;
width: 150px;
padding: 5px;
color: #000;
font-size: 14px;
text-align: center;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
border: 1px solid rgba(0, 0, 0, 0.281);
border-radius: 5px;
background: rgba(255, 255, 255, 0.9);
}
/* 左侧元素文本提示位置 */
[class*="bwiki-decor-l"] .bwiki-text-display { left: 5px; }
/* 右侧元素文本提示位置 */
[class*="bwiki-decor-r"] .bwiki-text-display { right: 5px; }
/* 响应式设计 */
@media screen and (max-width: 768px) {
#bwiki-christmas-decorations,
.bwiki-decor-top {
display: none !important;
}
}
</style>
</head>
<body>
<script>
(function () {
const CONFIG = {
imgScaleLeft: 0.3,
imgScaleRight: 0.26,
gifScaleLeft: 0.4,
gifScaleRight: 0.36,
imgSrc: {
"decor-top": "https://patchwiki.biligame.com/images/lysk/4/4d/44gsngalmerwb4ly9u1p8k1ugk56lti.png",
"decor-l1": "https://patchwiki.biligame.com/images/lysk/f/f3/668zprg2flsb0yu1tc1bmqa75z636cl.png",
"decor-l2": "https://patchwiki.biligame.com/images/lysk/4/44/dhkblsq2qp0kenowtzu6bno738a5dsc.png",
"decor-r1": "https://patchwiki.biligame.com/images/lysk/b/b5/r9ntrgvio8yzh87hoj1zazgovoy3e4j.png",
"decor-r2": "https://patchwiki.biligame.com/images/lysk/6/6e/gaovwo7efyyelvq135t49180vd61xa0.png",
"decor-r1-gif": "https://patchwiki.biligame.com/images/lysk/b/bf/4l1tsul5o893z3vloeqhs4hbe5erzra.gif",
"decor-r2-gif": "https://patchwiki.biligame.com/images/lysk/d/d5/hdvzch4cqeypms1yf1t96azehxy4tzv.gif",
"decor-l1-gif": "https://patchwiki.biligame.com/images/lysk/5/50/lm53tzjisalq99lta46f3a2gnzvf651.gif",
"decor-l2-gif": "https://patchwiki.biligame.com/images/lysk/d/d6/mp3y9fj9puvhsyse6oorb263jat4r3b.gif"
},
contentText: {
"l1": ["圣诞快乐", "……喵。", "想把图片收回去的话，点一下", "有个说明书：ooc致歉"],
"l2": ["圣诞快乐", "喵哼。", "想收回去？点一下", "哦，制作者还留了个说明：ooc致歉"],
"r1": ["圣诞快乐", "喵？喵喵。", "使用说明……点一下可以把图片收回去", "还有个说明：ooc致歉"],
"r2": ["圣诞快乐", "喵~", "保镖小姐，点一下试试看？可以收回去", "制作者说明：ooc致歉——好强的求生欲"]
}
};
function init() {
if (window.innerWidth <= 768 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) return;
// 清理现有元素
['#bwiki-christmas-decorations', '.bwiki-decor-top'].forEach(selector => {
document.querySelector(selector)?.remove();
});
// 创建装饰容器
const container = document.createElement('div');
container.id = 'bwiki-christmas-decorations';
container.style.setProperty('--img-scale-left', CONFIG.imgScaleLeft);
container.style.setProperty('--img-scale-right', CONFIG.imgScaleRight);
container.style.setProperty('--gif-scale-left', CONFIG.gifScaleLeft);
container.style.setProperty('--gif-scale-right', CONFIG.gifScaleRight);
// 创建装饰元素
['l1', 'l2', 'r1', 'r2'].forEach(type => {
const div = document.createElement('div');
div.className = `bwiki-fixed-element bwiki-decor-${type}`;
div.innerHTML = `
<img src="${CONFIG.imgSrc['decor-'+type]}" alt="圣诞装饰${type}">
`;
container.appendChild(div);
});
// 状态管理
let isCollapsed = false;
const elements = container.children;
// 事件处理
function handleClick(e) {
isCollapsed = !isCollapsed;
Array.from(elements).forEach(el => {
el.classList.toggle('collapsed', isCollapsed);
const img = el.querySelector('img');
const type = el.classList[1].replace('bwiki-decor-', );
img.src = CONFIG.imgSrc['decor-'+type];
});
}
function handleMouseEnter(e) {
const el = e.currentTarget.closest('.bwiki-fixed-element');
if (el.classList.contains('collapsed')) return;
const type = el.classList[1].replace('bwiki-decor-', );
const img = el.querySelector('img');
img.src = CONFIG.imgSrc['decor-'+type+'-gif'];
const textDisplay = el.querySelector('.bwiki-text-display');
if (textDisplay) {
let index = 0;
textDisplay.textContent = CONFIG.contentText[type][index];
textDisplay.style.opacity = '1';
el._textTimer = setInterval(() => {
index = (index + 1) % CONFIG.contentText[type].length;
textDisplay.textContent = CONFIG.contentText[type][index];
}, 3000);
}
}
function handleMouseLeave(e) {
const el = e.currentTarget.closest('.bwiki-fixed-element');
const type = el.classList[1].replace('bwiki-decor-', );
const img = el.querySelector('img');
img.src = CONFIG.imgSrc['decor-'+type];
const textDisplay = el.querySelector('.bwiki-text-display');
if (textDisplay) {
textDisplay.style.opacity = '0';
clearInterval(el._textTimer);
}
}
// 添加事件监听和文本显示
Array.from(elements).forEach(el => {
const textDisplay = document.createElement('div');
textDisplay.className = 'bwiki-text-display';
el.appendChild(textDisplay);
const eventBox = el.querySelector('.bwiki-event-box');
eventBox.addEventListener('click', handleClick);
eventBox.addEventListener('mouseenter', handleMouseEnter);
eventBox.addEventListener('mouseleave', handleMouseLeave);
});
// 添加元素到页面
document.body.appendChild(container);
// 添加顶部装饰
const top = document.createElement('div');
top.className = 'bwiki-decor-top';
const visibleBlock = document.querySelector('.visible-md-block.visible-lg-block');
if (visibleBlock?.parentNode) {
if (window.getComputedStyle(visibleBlock.parentNode).position === 'static') {
visibleBlock.parentNode.style.position = 'relative';
}
visibleBlock.parentNode.insertBefore(top, visibleBlock.nextSibling);
} else {
document.body.appendChild(top);
}
// 页面卸载时清理
window.addEventListener('unload', () => {
Array.from(elements).forEach(el => {
clearInterval(el._textTimer);
el.remove();
});
container.remove();
top.remove();
});
}
document.readyState === 'loading'
? document.addEventListener('DOMContentLoaded', init)
: init();
})();
</script>
</body>
</html>
沪公网安备 31011002002714 号
