216 lines
7.8 KiB
JavaScript
216 lines
7.8 KiB
JavaScript
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);
|
||
}
|
||
|
||
}); |