refactor(backend): 重构动物相关 API 接口
- 更新了动物数据结构和相关类型定义 - 优化了动物列表、详情、创建、更新和删除接口 - 新增了更新动物状态接口 - 移除了与认领记录相关的接口 -调整了 API 响应结构
This commit is contained in:
ylweng
237
website/js/main.js
Normal file
237
website/js/main.js
Normal file
@@ -0,0 +1,237 @@
|
||||
// 页面加载完成后执行
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 初始化AOS动画库
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
easing: 'ease-in-out',
|
||||
once: true,
|
||||
offset: 100
|
||||
});
|
||||
|
||||
// 页面加载动画
|
||||
setTimeout(function() {
|
||||
const loader = document.querySelector('.page-loader');
|
||||
if (loader) {
|
||||
loader.classList.add('hidden');
|
||||
|
||||
// 动画完成后移除元素
|
||||
setTimeout(function() {
|
||||
loader.style.display = 'none';
|
||||
}, 500);
|
||||
}
|
||||
}, 1500);
|
||||
|
||||
// 创建滚动进度条
|
||||
createScrollProgress();
|
||||
|
||||
// 创建返回顶部按钮
|
||||
createBackToTopButton();
|
||||
|
||||
// 添加滚动事件监听
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
// 初始化页面交互
|
||||
initPageInteractions();
|
||||
});
|
||||
|
||||
// 创建滚动进度条
|
||||
function createScrollProgress() {
|
||||
const progressBar = document.createElement('div');
|
||||
progressBar.className = 'scroll-progress';
|
||||
document.body.appendChild(progressBar);
|
||||
}
|
||||
|
||||
// 创建返回顶部按钮
|
||||
function createBackToTopButton() {
|
||||
const backToTopBtn = document.createElement('div');
|
||||
backToTopBtn.className = 'back-to-top';
|
||||
backToTopBtn.innerHTML = '<i class="fas fa-chevron-up"></i>';
|
||||
backToTopBtn.setAttribute('aria-label', '返回顶部');
|
||||
|
||||
backToTopBtn.addEventListener('click', function() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
|
||||
document.body.appendChild(backToTopBtn);
|
||||
}
|
||||
|
||||
// 处理滚动事件
|
||||
function handleScroll() {
|
||||
updateScrollProgress();
|
||||
toggleBackToTopButton();
|
||||
}
|
||||
|
||||
// 更新滚动进度条
|
||||
function updateScrollProgress() {
|
||||
const progressBar = document.querySelector('.scroll-progress');
|
||||
if (progressBar) {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight - windowHeight;
|
||||
const scrolled = (window.scrollY / documentHeight) * 100;
|
||||
progressBar.style.width = scrolled + '%';
|
||||
}
|
||||
}
|
||||
|
||||
// 显示/隐藏返回顶部按钮
|
||||
function toggleBackToTopButton() {
|
||||
const backToTopBtn = document.querySelector('.back-to-top');
|
||||
if (backToTopBtn) {
|
||||
if (window.scrollY > 300) {
|
||||
backToTopBtn.classList.add('visible');
|
||||
} else {
|
||||
backToTopBtn.classList.remove('visible');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化页面交互
|
||||
function initPageInteractions() {
|
||||
// 导航菜单点击效果
|
||||
initNavigation();
|
||||
|
||||
// 功能卡片悬停效果
|
||||
initFeatureCards();
|
||||
|
||||
// 用户评价卡片交互
|
||||
initTestimonialCards();
|
||||
|
||||
// 行动号召按钮点击效果
|
||||
initCallToAction();
|
||||
}
|
||||
|
||||
// 导航菜单交互
|
||||
function initNavigation() {
|
||||
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
// 移除所有active类
|
||||
navLinks.forEach(l => l.classList.remove('active'));
|
||||
|
||||
// 添加当前active类
|
||||
this.classList.add('active');
|
||||
|
||||
// 如果是锚点链接，平滑滚动
|
||||
const href = this.getAttribute('href');
|
||||
if (href && href.startsWith('#')) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(href);
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 功能卡片交互
|
||||
function initFeatureCards() {
|
||||
const featureCards = document.querySelectorAll('.feature-box');
|
||||
|
||||
featureCards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-10px)';
|
||||
this.style.boxShadow = '0 15px 30px rgba(0,0,0,0.15)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.05)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 用户评价卡片交互
|
||||
function initTestimonialCards() {
|
||||
const testimonialCards = document.querySelectorAll('.testimonial-card');
|
||||
|
||||
testimonialCards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-5px)';
|
||||
this.style.boxShadow = '0 10px 25px rgba(0,0,0,0.1)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.05)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 行动号召按钮交互
|
||||
function initCallToAction() {
|
||||
const ctaButtons = document.querySelectorAll('.cta-section .btn, .hero-section .btn');
|
||||
|
||||
ctaButtons.forEach(btn => {
|
||||
btn.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'scale(1.05)';
|
||||
this.style.boxShadow = '0 8px 25px rgba(0,0,0,0.2)';
|
||||
});
|
||||
|
||||
btn.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
this.style.boxShadow = 'none';
|
||||
});
|
||||
|
||||
btn.addEventListener('click', function(e) {
|
||||
// 添加点击效果
|
||||
this.style.transform = 'scale(0.95)';
|
||||
setTimeout(() => {
|
||||
this.style.transform = 'scale(1)';
|
||||
}, 150);
|
||||
|
||||
// 如果是演示按钮，阻止默认行为
|
||||
if (this.getAttribute('href') === '#') {
|
||||
e.preventDefault();
|
||||
alert('欢迎体验结伴客平台！此功能正在开发中，敬请期待。');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 页面性能优化：图片懒加载
|
||||
function initLazyLoading() {
|
||||
if ('IntersectionObserver' in window) {
|
||||
const lazyImages = document.querySelectorAll('img[data-src]');
|
||||
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.getAttribute('data-src');
|
||||
img.removeAttribute('data-src');
|
||||
imageObserver.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
lazyImages.forEach(img => {
|
||||
imageObserver.observe(img);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 页面可见性变化处理
|
||||
document.addEventListener('visibilitychange', function() {
|
||||
if (document.hidden) {
|
||||
console.log('页面被隐藏');
|
||||
} else {
|
||||
console.log('页面恢复显示');
|
||||
}
|
||||
});
|
||||
|
||||
// 错误处理
|
||||
window.addEventListener('error', function(e) {
|
||||
console.error('页面错误:', e.error);
|
||||
});
|
||||
|
||||
// 页面卸载前清理
|
||||
window.addEventListener('beforeunload', function() {
|
||||
// 清理操作
|
||||
});
|
||||
Reference in New Issue
Block a user