添加 IntelliJ IDEA 项目配置文件

website/js/main.js

@@ -9,6 +9,13 @@ document.addEventListener('DOMContentLoaded', function() {
     initBackToTop();
     initImageLazyLoading();
     initFormValidation();
+    initParticleEffect();
+    initTypewriter();
+    initProgressBars();
+    initCountUp();
+    initModalEffects();
+    initSmoothScrolling();
+    initPreloader();
     
     console.log('官网初始化完成 - 活牛采购智能数字化系统');
 });
@@ -17,23 +24,47 @@ document.addEventListener('DOMContentLoaded', function() {
 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', function() {
+    window.addEventListener('scroll', throttle(function() {
         if (window.scrollY > 100) {
-            navbar.classList.add('navbar-scrolled');
-            navbar.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
-            navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
+            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');
-            navbar.style.backgroundColor = 'rgba(255, 255, 255, 1)';
+            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类
@@ -45,13 +76,36 @@ function initNavigation() {
                 e.preventDefault();
                 const targetElement = document.querySelector(targetId);
                 if (targetElement) {
-                    targetElement.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start'
+                    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');
+        }
     });
 }
 
@@ -307,4 +361,346 @@ function monitorPerformance() {
 }
 
 // 初始化性能监控
-monitorPerformance();
+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();
+}