706 lines
22 KiB
JavaScript
706 lines
22 KiB
JavaScript
// 活牛采购智能数字化系统官网 - 主JavaScript文件
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 初始化所有功能
|
|
initNavigation();
|
|
initScrollEffects();
|
|
initAnimations();
|
|
initContactForm();
|
|
initBackToTop();
|
|
initImageLazyLoading();
|
|
initFormValidation();
|
|
initParticleEffect();
|
|
initTypewriter();
|
|
initProgressBars();
|
|
initCountUp();
|
|
initModalEffects();
|
|
initSmoothScrolling();
|
|
initPreloader();
|
|
|
|
console.log('官网初始化完成 - 活牛采购智能数字化系统');
|
|
});
|
|
|
|
// 导航功能初始化
|
|
function initNavigation() {
|
|
const navbar = document.querySelector('.navbar');
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
const navbarToggler = document.querySelector('.navbar-toggler');
|
|
const navbarCollapse = document.querySelector('.navbar-collapse');
|
|
|
|
// 滚动时导航栏样式变化
|
|
window.addEventListener('scroll', throttle(function() {
|
|
if (window.scrollY > 100) {
|
|
navbar.classList.add('navbar-scrolled', 'scrolled');
|
|
navbar.style.backgroundColor = 'rgba(0, 0, 0, 0.95)';
|
|
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.3)';
|
|
navbar.style.backdropFilter = 'blur(10px)';
|
|
} else {
|
|
navbar.classList.remove('navbar-scrolled', 'scrolled');
|
|
navbar.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
|
|
navbar.style.boxShadow = 'none';
|
|
}
|
|
}, 100));
|
|
|
|
// 移动端导航切换
|
|
if (navbarToggler && navbarCollapse) {
|
|
navbarToggler.addEventListener('click', function() {
|
|
navbarCollapse.classList.toggle('show');
|
|
this.classList.toggle('collapsed');
|
|
|
|
// 动画效果
|
|
if (navbarCollapse.classList.contains('show')) {
|
|
navbarCollapse.style.animation = 'slideDown 0.3s ease-out';
|
|
} else {
|
|
navbarCollapse.style.animation = 'slideUp 0.3s ease-out';
|
|
}
|
|
});
|
|
}
|
|
|
|
// 导航链接点击效果
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
// 添加点击动画
|
|
this.style.transform = 'scale(0.95)';
|
|
setTimeout(() => {
|
|
this.style.transform = 'scale(1)';
|
|
}, 150);
|
|
|
|
// 移除所有active类
|
|
navLinks.forEach(l => l.classList.remove('active'));
|
|
// 添加当前active类
|
|
this.classList.add('active');
|
|
|
|
// 平滑滚动到目标区域
|
|
const targetId = this.getAttribute('href');
|
|
if (targetId && targetId.startsWith('#')) {
|
|
e.preventDefault();
|
|
const targetElement = document.querySelector(targetId);
|
|
if (targetElement) {
|
|
const offsetTop = targetElement.offsetTop - 80;
|
|
window.scrollTo({
|
|
top: offsetTop,
|
|
behavior: 'smooth'
|
|
});
|
|
|
|
// 关闭移动端菜单
|
|
if (navbarCollapse.classList.contains('show')) {
|
|
navbarToggler.click();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 悬停效果
|
|
link.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-2px)';
|
|
});
|
|
|
|
link.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0)';
|
|
});
|
|
});
|
|
|
|
// 自动高亮当前页面对应的导航项
|
|
const currentPage = window.location.pathname.split('/').pop();
|
|
navLinks.forEach(link => {
|
|
if (link.getAttribute('href') === currentPage) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 滚动效果初始化
|
|
function initScrollEffects() {
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver(function(entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('fade-in-up');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// 观察所有需要动画的元素
|
|
const animateElements = document.querySelectorAll('.card, .feature-icon, h2, h3, p.lead');
|
|
animateElements.forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
}
|
|
|
|
// 动画效果初始化
|
|
function initAnimations() {
|
|
// 数字统计动画
|
|
const stats = document.querySelectorAll('.stat-number');
|
|
if (stats.length > 0) {
|
|
stats.forEach(stat => {
|
|
const target = parseInt(stat.textContent);
|
|
let current = 0;
|
|
const duration = 2000; // 2秒
|
|
const increment = target / (duration / 16); // 60fps
|
|
|
|
const timer = setInterval(() => {
|
|
current += increment;
|
|
if (current >= target) {
|
|
stat.textContent = target.toLocaleString();
|
|
clearInterval(timer);
|
|
} else {
|
|
stat.textContent = Math.floor(current).toLocaleString();
|
|
}
|
|
}, 16);
|
|
});
|
|
}
|
|
|
|
// 鼠标悬停效果
|
|
const cards = document.querySelectorAll('.card');
|
|
cards.forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-8px)';
|
|
this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.15)';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0)';
|
|
this.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
|
|
});
|
|
});
|
|
}
|
|
|
|
// 联系表单初始化
|
|
function initContactForm() {
|
|
const contactForm = document.getElementById('contactForm');
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// 表单验证
|
|
if (!validateForm(contactForm)) {
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData(this);
|
|
const submitBtn = this.querySelector('button[type="submit"]');
|
|
const originalText = submitBtn.textContent;
|
|
|
|
// 显示加载状态
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<span class="loading-spinner" role="status" aria-hidden="true"></span> 提交中...';
|
|
|
|
// 模拟表单提交
|
|
setTimeout(() => {
|
|
// 这里可以替换为实际的API调用
|
|
showAlert('success', '提交成功！我们会尽快联系您。');
|
|
contactForm.reset();
|
|
|
|
// 恢复按钮状态
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = originalText;
|
|
}, 2000);
|
|
});
|
|
}
|
|
}
|
|
|
|
// 表单验证
|
|
function validateForm(form) {
|
|
let isValid = true;
|
|
const requiredFields = form.querySelectorAll('[required]');
|
|
|
|
requiredFields.forEach(field => {
|
|
if (!field.value.trim()) {
|
|
isValid = false;
|
|
field.classList.add('is-invalid');
|
|
|
|
// 创建错误提示
|
|
if (!field.nextElementSibling || !field.nextElementSibling.classList.contains('invalid-feedback')) {
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'invalid-feedback';
|
|
errorDiv.textContent = '此字段为必填项';
|
|
field.parentNode.insertBefore(errorDiv, field.nextSibling);
|
|
}
|
|
} else {
|
|
field.classList.remove('is-invalid');
|
|
|
|
// 移除错误提示
|
|
if (field.nextElementSibling && field.nextElementSibling.classList.contains('invalid-feedback')) {
|
|
field.nextElementSibling.remove();
|
|
}
|
|
}
|
|
});
|
|
|
|
return isValid;
|
|
}
|
|
|
|
// 显示提示信息
|
|
function showAlert(type, message) {
|
|
const alertDiv = document.createElement('div');
|
|
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
|
|
alertDiv.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
|
|
// 添加到页面顶部
|
|
document.body.insertBefore(alertDiv, document.body.firstChild);
|
|
|
|
// 5秒后自动消失
|
|
setTimeout(() => {
|
|
if (alertDiv.parentNode) {
|
|
alertDiv.remove();
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
// 返回顶部功能
|
|
function initBackToTop() {
|
|
const backToTopBtn = document.createElement('button');
|
|
backToTopBtn.innerHTML = '<i class="fas fa-arrow-up"></i>';
|
|
backToTopBtn.className = 'btn btn-primary back-to-top';
|
|
|
|
document.body.appendChild(backToTopBtn);
|
|
|
|
backToTopBtn.addEventListener('click', function() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
|
|
window.addEventListener('scroll', function() {
|
|
if (window.scrollY > 300) {
|
|
backToTopBtn.style.display = 'block';
|
|
} else {
|
|
backToTopBtn.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
// 图片懒加载
|
|
function initImageLazyLoading() {
|
|
const images = document.querySelectorAll('img[data-src]');
|
|
|
|
if ('IntersectionObserver' in window) {
|
|
const imageObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const img = entry.target;
|
|
img.src = img.dataset.src;
|
|
img.classList.remove('lazy');
|
|
imageObserver.unobserve(img);
|
|
}
|
|
});
|
|
});
|
|
|
|
images.forEach(img => imageObserver.observe(img));
|
|
} else {
|
|
// 降级处理
|
|
images.forEach(img => {
|
|
img.src = img.dataset.src;
|
|
});
|
|
}
|
|
}
|
|
|
|
// 表单验证初始化
|
|
function initFormValidation() {
|
|
const forms = document.querySelectorAll('.needs-validation');
|
|
|
|
Array.from(forms).forEach(form => {
|
|
form.addEventListener('submit', function(e) {
|
|
if (!form.checkValidity()) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
form.classList.add('was-validated');
|
|
}, false);
|
|
});
|
|
}
|
|
|
|
// 工具函数：防抖
|
|
function debounce(func, wait) {
|
|
let timeout;
|
|
return function executedFunction(...args) {
|
|
const later = () => {
|
|
clearTimeout(timeout);
|
|
func(...args);
|
|
};
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
};
|
|
}
|
|
|
|
// 工具函数：节流
|
|
function throttle(func, limit) {
|
|
let inThrottle;
|
|
return function() {
|
|
const args = arguments;
|
|
const context = this;
|
|
if (!inThrottle) {
|
|
func.apply(context, args);
|
|
inThrottle = true;
|
|
setTimeout(() => inThrottle = false, limit);
|
|
}
|
|
};
|
|
}
|
|
|
|
// 页面性能监控
|
|
function monitorPerformance() {
|
|
window.addEventListener('load', function() {
|
|
// 页面加载完成时间
|
|
const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
|
|
console.log(`页面加载完成时间: ${loadTime}ms`);
|
|
|
|
// 核心网页指标
|
|
if ('loading' in HTMLImageElement.prototype) {
|
|
console.log('浏览器支持原生懒加载');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 初始化性能监控
|
|
monitorPerformance();
|
|
|
|
// 加载动画初始化
|
|
function initPreloader() {
|
|
const preloader = document.createElement('div');
|
|
preloader.className = 'preloader';
|
|
preloader.innerHTML = `
|
|
<div class="preloader-inner">
|
|
<div class="preloader-logo">
|
|
<i class="fas fa-cow text-primary fs-1"></i>
|
|
<div class="brand-name mt-2">NiuMall</div>
|
|
</div>
|
|
<div class="loading-bar">
|
|
<div class="loading-progress"></div>
|
|
</div>
|
|
<p class="loading-text">正在加载中...</p>
|
|
</div>
|
|
`;
|
|
|
|
// 添加加载动画样式
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.preloader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
transition: opacity 0.5s ease, visibility 0.5s ease;
|
|
}
|
|
.preloader-inner {
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
.brand-name {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.loading-bar {
|
|
width: 200px;
|
|
height: 4px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
}
|
|
.loading-progress {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #4CAF50, #81C784);
|
|
width: 0;
|
|
animation: loadingProgress 2s ease-in-out;
|
|
}
|
|
.loading-text {
|
|
margin-top: 1rem;
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
}
|
|
@keyframes loadingProgress {
|
|
0% { width: 0%; }
|
|
100% { width: 100%; }
|
|
}
|
|
.preloader.hide {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
`;
|
|
|
|
document.head.appendChild(style);
|
|
document.body.appendChild(preloader);
|
|
|
|
// 页面加载完成后隐藏加载动画
|
|
window.addEventListener('load', function() {
|
|
setTimeout(() => {
|
|
preloader.classList.add('hide');
|
|
setTimeout(() => {
|
|
preloader.remove();
|
|
style.remove();
|
|
}, 500);
|
|
}, 1000);
|
|
});
|
|
}
|
|
|
|
// 打字机效果
|
|
function initTypewriter() {
|
|
const typewriterElements = document.querySelectorAll('.typewriter');
|
|
|
|
typewriterElements.forEach(element => {
|
|
const text = element.textContent;
|
|
element.textContent = '';
|
|
element.style.borderRight = '2px solid #4CAF50';
|
|
element.style.animation = 'typewriter-cursor 1s infinite';
|
|
|
|
let i = 0;
|
|
const timer = setInterval(() => {
|
|
if (i < text.length) {
|
|
element.textContent += text.charAt(i);
|
|
i++;
|
|
} else {
|
|
clearInterval(timer);
|
|
setTimeout(() => {
|
|
element.style.borderRight = 'none';
|
|
}, 1000);
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
// 添加打字机样式
|
|
if (!document.querySelector('#typewriter-style')) {
|
|
const style = document.createElement('style');
|
|
style.id = 'typewriter-style';
|
|
style.textContent = `
|
|
@keyframes typewriter-cursor {
|
|
0%, 50% { border-right-color: transparent; }
|
|
51%, 100% { border-right-color: #4CAF50; }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
}
|
|
|
|
// 进度条动画
|
|
function initProgressBars() {
|
|
const progressBars = document.querySelectorAll('.progress-bar');
|
|
|
|
const progressObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const progressBar = entry.target;
|
|
const targetWidth = progressBar.getAttribute('data-width') || '100%';
|
|
|
|
progressBar.style.width = '0%';
|
|
progressBar.style.transition = 'width 2s ease-in-out';
|
|
|
|
setTimeout(() => {
|
|
progressBar.style.width = targetWidth;
|
|
}, 100);
|
|
|
|
progressObserver.unobserve(progressBar);
|
|
}
|
|
});
|
|
});
|
|
|
|
progressBars.forEach(bar => progressObserver.observe(bar));
|
|
}
|
|
|
|
// 数字递增动画优化
|
|
function initCountUp() {
|
|
const countElements = document.querySelectorAll('.count-up');
|
|
|
|
const countObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const element = entry.target;
|
|
const target = parseInt(element.getAttribute('data-target') || element.textContent);
|
|
const duration = parseInt(element.getAttribute('data-duration') || '2000');
|
|
const suffix = element.getAttribute('data-suffix') || '';
|
|
|
|
animateNumber(element, 0, target, duration, suffix);
|
|
countObserver.unobserve(element);
|
|
}
|
|
});
|
|
});
|
|
|
|
countElements.forEach(el => countObserver.observe(el));
|
|
}
|
|
|
|
// 数字动画函数
|
|
function animateNumber(element, start, end, duration, suffix) {
|
|
const startTime = performance.now();
|
|
|
|
function update(currentTime) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
// 使用缓动函数
|
|
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
|
const current = Math.floor(start + (end - start) * easeProgress);
|
|
|
|
element.textContent = current.toLocaleString() + suffix;
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(update);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(update);
|
|
}
|
|
|
|
// 模态框效果
|
|
function initModalEffects() {
|
|
const modals = document.querySelectorAll('.modal');
|
|
|
|
modals.forEach(modal => {
|
|
modal.addEventListener('show.bs.modal', function() {
|
|
this.querySelector('.modal-dialog').style.transform = 'scale(0.8)';
|
|
this.querySelector('.modal-dialog').style.opacity = '0';
|
|
|
|
setTimeout(() => {
|
|
this.querySelector('.modal-dialog').style.transition = 'all 0.3s ease';
|
|
this.querySelector('.modal-dialog').style.transform = 'scale(1)';
|
|
this.querySelector('.modal-dialog').style.opacity = '1';
|
|
}, 10);
|
|
});
|
|
|
|
modal.addEventListener('hide.bs.modal', function() {
|
|
this.querySelector('.modal-dialog').style.transform = 'scale(0.8)';
|
|
this.querySelector('.modal-dialog').style.opacity = '0';
|
|
});
|
|
});
|
|
}
|
|
|
|
// 平滑滚动优化
|
|
function initSmoothScrolling() {
|
|
// 禁用默认滚动行为
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
|
|
if (target) {
|
|
const offsetTop = target.getBoundingClientRect().top + window.pageYOffset - 80;
|
|
|
|
// 使用自定义平滑滚动
|
|
smoothScrollTo(offsetTop, 1000);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// 自定义平滑滚动函数
|
|
function smoothScrollTo(target, duration) {
|
|
const start = window.pageYOffset;
|
|
const distance = target - start;
|
|
const startTime = performance.now();
|
|
|
|
function scroll(currentTime) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
// 使用缓动函数
|
|
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
|
|
|
window.scrollTo(0, start + distance * easeProgress);
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(scroll);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(scroll);
|
|
}
|
|
|
|
// 粒子效果
|
|
function initParticleEffect() {
|
|
const heroSection = document.querySelector('.hero-section');
|
|
if (!heroSection) return;
|
|
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.style.position = 'absolute';
|
|
canvas.style.top = '0';
|
|
canvas.style.left = '0';
|
|
canvas.style.width = '100%';
|
|
canvas.style.height = '100%';
|
|
canvas.style.pointerEvents = 'none';
|
|
canvas.style.zIndex = '1';
|
|
|
|
heroSection.appendChild(canvas);
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = heroSection.offsetWidth;
|
|
canvas.height = heroSection.offsetHeight;
|
|
}
|
|
|
|
resizeCanvas();
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
const particles = [];
|
|
|
|
// 创建粒子
|
|
function createParticle() {
|
|
return {
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
vx: (Math.random() - 0.5) * 0.5,
|
|
vy: (Math.random() - 0.5) * 0.5,
|
|
radius: Math.random() * 2 + 1,
|
|
opacity: Math.random() * 0.5 + 0.2
|
|
};
|
|
}
|
|
|
|
// 初始化粒子
|
|
for (let i = 0; i < 50; i++) {
|
|
particles.push(createParticle());
|
|
}
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
particles.forEach((particle, index) => {
|
|
// 更新位置
|
|
particle.x += particle.vx;
|
|
particle.y += particle.vy;
|
|
|
|
// 边界检测
|
|
if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1;
|
|
if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1;
|
|
|
|
// 绘制粒子
|
|
ctx.beginPath();
|
|
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
|
|
ctx.fillStyle = `rgba(76, 175, 80, ${particle.opacity})`;
|
|
ctx.fill();
|
|
|
|
// 连接粒子
|
|
particles.forEach((otherParticle, otherIndex) => {
|
|
if (index !== otherIndex) {
|
|
const dx = particle.x - otherParticle.x;
|
|
const dy = particle.y - otherParticle.y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < 100) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(particle.x, particle.y);
|
|
ctx.lineTo(otherParticle.x, otherParticle.y);
|
|
ctx.strokeStyle = `rgba(76, 175, 80, ${0.1 * (1 - distance / 100)})`;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
} |