130 lines
3.9 KiB
JavaScript
130 lines
3.9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const navLinks = document.querySelectorAll('nav a');
|
|
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
navLinks.forEach(l => l.classList.remove('active'));
|
|
this.classList.add('active');
|
|
});
|
|
});
|
|
|
|
const productCards = document.querySelectorAll('.product-card');
|
|
|
|
productCards.forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-10px) scale(1.02)';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0) scale(1)';
|
|
});
|
|
});
|
|
|
|
const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');
|
|
|
|
smoothScrollLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const targetId = this.getAttribute('href').substring(1);
|
|
const targetElement = document.getElementById(targetId);
|
|
|
|
if (targetElement) {
|
|
targetElement.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
const infoBoxes = document.querySelectorAll('.info-box, .warning-box, .success-box');
|
|
|
|
infoBoxes.forEach(box => {
|
|
box.style.opacity = '0';
|
|
box.style.transform = 'translateY(20px)';
|
|
});
|
|
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
infoBoxes.forEach(box => {
|
|
observer.observe(box);
|
|
});
|
|
|
|
const backToTopBtn = document.createElement('button');
|
|
backToTopBtn.innerHTML = '↑';
|
|
backToTopBtn.className = 'back-to-top';
|
|
backToTopBtn.style.cssText = `
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
|
`;
|
|
|
|
document.body.appendChild(backToTopBtn);
|
|
|
|
window.addEventListener('scroll', function() {
|
|
if (window.pageYOffset > 300) {
|
|
backToTopBtn.style.opacity = '1';
|
|
backToTopBtn.style.pointerEvents = 'auto';
|
|
} else {
|
|
backToTopBtn.style.opacity = '0';
|
|
backToTopBtn.style.pointerEvents = 'none';
|
|
}
|
|
});
|
|
|
|
backToTopBtn.addEventListener('click', function() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
|
|
backToTopBtn.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'scale(1.1)';
|
|
});
|
|
|
|
backToTopBtn.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'scale(1)';
|
|
});
|
|
|
|
const codeBlocks = document.querySelectorAll('code');
|
|
|
|
codeBlocks.forEach(code => {
|
|
code.style.cssText = `
|
|
background: #f5f5f5;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
color: #e83e8c;
|
|
`;
|
|
});
|
|
|
|
console.log('泽枢云启 - 产品使用说明网站已加载完成');
|
|
console.log('© 2026 泽枢云启');
|
|
});
|