document.addEventListener('DOMContentLoaded', function () { /** 主营业务下拉菜单与遮罩层交互 */ // const dropdown = document.querySelector('.nav-dropdown'); // const mask = document.querySelector('.dropdown-mask'); // const navLink = dropdown?.querySelector('.nav-link'); // if (dropdown || mask || navLink) { // const handleToggleDropdown = (e) => { // e.preventDefault(); // const isOpen = dropdown.classList.contains('open'); // if (isOpen) { // dropdown.classList.remove('open'); // dropdown.setAttribute('aria-expanded', 'false'); // mask.classList.remove('active'); // } else { // dropdown.classList.add('open'); // dropdown.setAttribute('aria-expanded', 'true'); // mask.classList.add('active'); // } // }; // const handleCloseDropdown = () => { // dropdown.classList.remove('open'); // dropdown.setAttribute('aria-expanded', 'false'); // mask.classList.remove('active'); // }; // // 点击“主营业务”切换下拉 // navLink.addEventListener('click', handleToggleDropdown); // // 遮罩层点击关闭 // mask.addEventListener('click', handleCloseDropdown); // // 键盘无障碍支持(Enter/Space) // dropdown.addEventListener('keydown', (e) => { // if (e.key === 'Enter' || e.key === ' ') { // e.preventDefault(); // handleToggleDropdown(e); // } // if (e.key === 'Escape') { // handleCloseDropdown(); // } // }); // } // /** 下拉菜单箭头hover切换图片 */ // const dropdownMenuItems = document.querySelectorAll('.dropdown-menu li'); // if (dropdownMenuItems.length) { // dropdownMenuItems.forEach((li) => { // li.addEventListener('mouseenter', () => { // const img = li.querySelector('.dropdown-item img'); // if (img) img.src = './imgs/home/arrow.svg'; // }); // li.addEventListener('mouseleave', () => { // const img = li.querySelector('.dropdown-item img'); // if (img) img.src = './imgs/home/arrow2.svg'; // }); // }); // } /** 关于驭鑫箭头hover切换图片 */ const aboutArrow = document.querySelector('.about-us-arrow img'); const aboutArrowBox = document.querySelector('.about-us-arrow'); if (aboutArrow || aboutArrowBox) { aboutArrowBox.addEventListener('click', () => { window.location.href = './html/aboutYuxin.html'; }); aboutArrowBox.addEventListener('mouseenter', () => { aboutArrow.src = './imgs/home/arrow.svg'; }); aboutArrowBox.addEventListener('mouseleave', () => { aboutArrow.src = './imgs/home/arrow2.svg'; }); } // arrowBox hover 切换图片和背景 const arrowBox = document.querySelector('.arrowBox'); const arrowImg = arrowBox?.querySelector('img'); if (arrowBox && arrowImg) { arrowBox.addEventListener('mouseenter', () => { arrowImg.src = './imgs/home/arrow.svg'; }); arrowBox.addEventListener('mouseleave', () => { arrowImg.src = './imgs/home/arrow2.svg'; }); } // ------------------------芯片代理区滚动图区-------------------------------- const container = document.querySelector('.brand-carousel-container'); const list = document.querySelector('.brand-carousel-list'); const btnLeft = document.querySelector('.brand-btn.left'); const btnRight = document.querySelector('.brand-btn.right'); if (container && list) { const clone = list.cloneNode(true); clone.classList.add('brand-carousel-list-clone'); list.parentNode.appendChild(clone); list.style.display = 'inline-flex'; clone.style.display = 'inline-flex'; container.style.whiteSpace = 'nowrap'; let scrollSpeed = 1; // 调整为你想要的速度 let isHovering = false; let pauseTimer = null; // 鼠标悬停暂停 container.addEventListener('mouseenter', () => { isHovering = true; }); container.addEventListener('mouseleave', () => { isHovering = false; }); function loopScroll() { if (!isHovering) { if (container.scrollLeft >= list.scrollWidth) { container.scrollLeft -= list.scrollWidth; } else { container.scrollLeft += scrollSpeed; } } requestAnimationFrame(loopScroll); } loopScroll(); function getItemWidth() { const item = list.querySelector('.brand-item'); if (!item) return 200; const style = getComputedStyle(item); return item.offsetWidth + parseFloat(style.marginLeft || 0) + parseFloat(style.marginRight || 0); } function scrollByStep(step) { // 暂停自动滚动一小段时间 isHovering = true; if (pauseTimer) clearTimeout(pauseTimer); pauseTimer = setTimeout(() => { isHovering = false; }, 1500); let target = container.scrollLeft + step * getItemWidth(); if (target < 0) { target = list.scrollWidth + target; } if (target >= list.scrollWidth) { target = target - list.scrollWidth; } container.scrollTo({ left: target, behavior: 'smooth' }); } if (btnLeft) { btnLeft.addEventListener('click', () => { scrollByStep(-1); }); } if (btnRight) { btnRight.addEventListener('click', () => { scrollByStep(1); }); } } // -----------------------------电子产品设计生产制造服务区卡片轮播-------------------------------- const cardContainer = document.querySelector('.card-carousel-container'); const cardList = document.querySelector('.card-carousel-list'); if (cardContainer && cardList) { // 克隆列表实现无缝滚动 const clone = cardList.cloneNode(true); clone.classList.add('card-carousel-list-clone'); cardList.parentNode.appendChild(clone); // 设置样式 cardList.style.display = 'inline-flex'; clone.style.display = 'inline-flex'; cardContainer.style.whiteSpace = 'nowrap'; let scrollSpeed = 1; // 增加滚动速度 let isHovering = false; // 鼠标悬停暂停 cardContainer.addEventListener('mouseenter', () => { console.log('Mouse enter - pausing scroll'); isHovering = true; }); cardContainer.addEventListener('mouseleave', () => { console.log('Mouse leave - resuming scroll'); isHovering = false; }); function loopScroll() { if (!isHovering) { if (cardContainer.scrollLeft >= cardList.scrollWidth) { console.log('Resetting scroll position'); cardContainer.scrollLeft = 0; } else { cardContainer.scrollLeft += scrollSpeed; } } requestAnimationFrame(loopScroll); } // 启动滚动 console.log('Starting scroll animation'); loopScroll(); // 调试信息 console.log('Container width:', cardContainer.offsetWidth); console.log('List width:', cardList.scrollWidth); console.log('Clone width:', clone.scrollWidth); console.log('Initial scroll position:', cardContainer.scrollLeft); } });