264 lines
8.1 KiB
JavaScript
264 lines
8.1 KiB
JavaScript
// 冰雪奇缘风格的图书库存日志页面JavaScript
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
|
||
// 雪花动画效果
|
||
createSnowflakes();
|
||
|
||
// 表格行动画效果
|
||
animateTableRows();
|
||
|
||
// 为表格行添加互动效果
|
||
addTableRowInteractions();
|
||
|
||
// 添加书籍封面魔法效果
|
||
addBookCoverMagic();
|
||
|
||
// 添加按钮魔法效果
|
||
addButtonMagic();
|
||
|
||
// 响应式表格标签
|
||
makeTableResponsive();
|
||
});
|
||
|
||
// 创建额外的雪花
|
||
function createSnowflakes() {
|
||
const snowflakesContainer = document.querySelector('.snowflakes');
|
||
if (!snowflakesContainer) return;
|
||
|
||
// 添加更多雪花，共30个
|
||
for (let i = 0; i < 20; i++) {
|
||
const snowflake = document.createElement('div');
|
||
snowflake.className = 'snowflake';
|
||
snowflake.textContent = ['❄', '❅', '❆'][Math.floor(Math.random() * 3)];
|
||
|
||
// 随机位置和动画
|
||
const left = Math.random() * 100;
|
||
const animDuration = 8 + Math.random() * 10;
|
||
const animDelay = Math.random() * 5;
|
||
const fontSize = 0.8 + Math.random() * 1.2;
|
||
|
||
snowflake.style.left = `${left}%`;
|
||
snowflake.style.animationDuration = `${animDuration}s`;
|
||
snowflake.style.animationDelay = `${animDelay}s`;
|
||
snowflake.style.fontSize = `${fontSize}em`;
|
||
|
||
snowflakesContainer.appendChild(snowflake);
|
||
}
|
||
}
|
||
|
||
// 表格行动画效果
|
||
function animateTableRows() {
|
||
const tableRows = document.querySelectorAll('.table-row');
|
||
|
||
tableRows.forEach((row, index) => {
|
||
// 设置动画延迟，创建瀑布效果
|
||
row.style.animationDelay = `${index * 0.08}s`;
|
||
row.classList.add('fade-in');
|
||
|
||
// 为入库和出库行添加不同的动画效果
|
||
if (row.dataset.type === 'in') {
|
||
row.classList.add('in-animation');
|
||
} else if (row.dataset.type === 'out') {
|
||
row.classList.add('out-animation');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 为表格行添加互动效果
|
||
function addTableRowInteractions() {
|
||
const tableRows = document.querySelectorAll('.table-row');
|
||
|
||
tableRows.forEach(row => {
|
||
// 点击高亮效果
|
||
row.addEventListener('click', function() {
|
||
// 移除其他行的选中状态
|
||
document.querySelectorAll('.table-row').forEach(r => {
|
||
r.classList.remove('selected-row');
|
||
});
|
||
|
||
// 添加当前行的选中状态
|
||
this.classList.add('selected-row');
|
||
|
||
// 添加闪光效果
|
||
const sparkle = document.createElement('div');
|
||
sparkle.className = 'row-sparkle';
|
||
this.appendChild(sparkle);
|
||
|
||
// 移除闪光效果
|
||
setTimeout(() => {
|
||
sparkle.remove();
|
||
}, 800);
|
||
});
|
||
|
||
// 鼠标悬停效果
|
||
row.addEventListener('mouseenter', function() {
|
||
// 添加冰晶效果
|
||
const iceEffect = document.createElement('div');
|
||
iceEffect.className = 'ice-effect';
|
||
this.appendChild(iceEffect);
|
||
|
||
// 移除冰晶效果
|
||
this.addEventListener('mouseleave', function() {
|
||
iceEffect.remove();
|
||
}, { once: true });
|
||
});
|
||
});
|
||
}
|
||
|
||
// 添加书籍封面魔法效果
|
||
function addBookCoverMagic() {
|
||
const bookCover = document.querySelector('.book-cover');
|
||
const bookFrame = document.querySelector('.book-frame');
|
||
|
||
if (bookCover && bookFrame) {
|
||
// 鼠标移动时添加3D效果
|
||
bookFrame.addEventListener('mousemove', function(e) {
|
||
const rect = this.getBoundingClientRect();
|
||
const x = e.clientX - rect.left;
|
||
const y = e.clientY - rect.top;
|
||
|
||
const centerX = rect.width / 2;
|
||
const centerY = rect.height / 2;
|
||
|
||
const deltaX = (x - centerX) / 20;
|
||
const deltaY = (y - centerY) / 20;
|
||
|
||
bookCover.style.transform = `rotate(0deg) perspective(800px) rotateX(${-deltaY}deg) rotateY(${deltaX}deg)`;
|
||
});
|
||
|
||
// 鼠标离开时恢复
|
||
bookFrame.addEventListener('mouseleave', function() {
|
||
bookCover.style.transform = 'rotate(3deg)';
|
||
});
|
||
|
||
// 点击时添加闪光效果
|
||
bookFrame.addEventListener('click', function() {
|
||
const glow = document.querySelector('.book-glow');
|
||
glow.style.opacity = '1';
|
||
glow.style.background = 'radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(173, 216, 230, 0) 70%)';
|
||
|
||
setTimeout(() => {
|
||
glow.style.opacity = '0';
|
||
}, 500);
|
||
});
|
||
}
|
||
}
|
||
|
||
// 添加按钮魔法效果
|
||
function addButtonMagic() {
|
||
const buttons = document.querySelectorAll('.frozen-btn');
|
||
|
||
buttons.forEach(button => {
|
||
button.addEventListener('mouseenter', function() {
|
||
// 创建冰晶效果
|
||
const sparkles = document.createElement('div');
|
||
sparkles.className = 'btn-sparkles';
|
||
this.appendChild(sparkles);
|
||
|
||
// 冰晶动画
|
||
for (let i = 0; i < 5; i++) {
|
||
const sparkle = document.createElement('div');
|
||
sparkle.className = 'btn-sparkle';
|
||
sparkle.style.left = `${Math.random() * 100}%`;
|
||
sparkle.style.top = `${Math.random() * 100}%`;
|
||
sparkle.style.animationDelay = `${Math.random() * 0.5}s`;
|
||
sparkles.appendChild(sparkle);
|
||
}
|
||
});
|
||
|
||
button.addEventListener('mouseleave', function() {
|
||
const sparkles = this.querySelector('.btn-sparkles');
|
||
if (sparkles) {
|
||
sparkles.remove();
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 响应式表格
|
||
function makeTableResponsive() {
|
||
if (window.innerWidth <= 768) {
|
||
const headerCells = document.querySelectorAll('.th-frozen');
|
||
const headers = Array.from(headerCells).map(cell => cell.textContent);
|
||
|
||
const dataCells = document.querySelectorAll('.td-frozen');
|
||
|
||
dataCells.forEach((cell, index) => {
|
||
const headerIndex = index % headers.length;
|
||
cell.setAttribute('data-label', headers[headerIndex]);
|
||
});
|
||
}
|
||
}
|
||
|
||
// 创建额外CSS样式
|
||
function addExtraStyles() {
|
||
const styleSheet = document.createElement('style');
|
||
styleSheet.type = 'text/css';
|
||
styleSheet.innerHTML = `
|
||
.row-sparkle {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
|
||
pointer-events: none;
|
||
animation: rowSparkle 0.8s ease forwards;
|
||
}
|
||
|
||
@keyframes rowSparkle {
|
||
0% { transform: translateX(-100%); }
|
||
100% { transform: translateX(100%); }
|
||
}
|
||
|
||
.ice-effect {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(173, 216, 230, 0.1), rgba(255, 255, 255, 0));
|
||
pointer-events: none;
|
||
backdrop-filter: brightness(1.03);
|
||
}
|
||
|
||
.btn-sparkles {
|
||
position: absolute;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.btn-sparkle {
|
||
position: absolute;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
pointer-events: none;
|
||
animation: btnSparkle 1s ease infinite;
|
||
}
|
||
|
||
@keyframes btnSparkle {
|
||
0%, 100% { transform: scale(0); opacity: 0; }
|
||
50% { transform: scale(1); opacity: 1; }
|
||
}
|
||
|
||
.in-animation {
|
||
border-left: 3px solid rgba(3, 169, 244, 0.5);
|
||
}
|
||
|
||
.out-animation {
|
||
border-left: 3px solid rgba(255, 152, 0, 0.5);
|
||
}
|
||
`;
|
||
|
||
document.head.appendChild(styleSheet);
|
||
}
|
||
|
||
// 初始化额外样式
|
||
addExtraStyles();
|
||
|
||
// 窗口大小变化时重新调整
|
||
window.addEventListener('resize', makeTableResponsive);
|