重写驭鑫网站 当前已完成 首页、关于驭鑫页面
This commit is contained in:
216
驭鑫/new yxsilicon/js/index.js
Normal file
216
驭鑫/new yxsilicon/js/index.js
Normal file
@@ -0,0 +1,216 @@
|
||||
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);
|
||||
}
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user