重写驭鑫网站 new yxsilicon
This commit is contained in:
@@ -164,4 +164,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
} else {
|
||||
console.error('地图容器不存在');
|
||||
}
|
||||
if (window.location.hash === '#address-li') {
|
||||
const addressLi = document.getElementById('address-li');
|
||||
if (addressLi) {
|
||||
addressLi.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
9
驭鑫/new yxsilicon/js/footer.js
Normal file
9
驭鑫/new yxsilicon/js/footer.js
Normal file
@@ -0,0 +1,9 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelectorAll('.footer-case-link').forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
window.name = this.dataset.index + '|scroll';
|
||||
window.location.href = this.href;
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,65 +1,5 @@
|
||||
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';
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -101,19 +41,18 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
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 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) {
|
||||
@@ -125,30 +64,47 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
requestAnimationFrame(loopScroll);
|
||||
}
|
||||
loopScroll();
|
||||
|
||||
|
||||
// 动态获取单个brand-item的宽度（含margin）
|
||||
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);
|
||||
// 只加margin-right，因为你只有右间隔
|
||||
return item.offsetWidth + 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' });
|
||||
|
||||
const itemWidth = getItemWidth();
|
||||
const visibleItems = Math.floor(container.offsetWidth / itemWidth);
|
||||
const count = 3; // 每次滑动3个
|
||||
|
||||
// 计算新的滚动位置，确保完整项目显示
|
||||
let target = Math.round(container.scrollLeft / itemWidth) * itemWidth;
|
||||
target += step * count * itemWidth;
|
||||
|
||||
// 限制滚动范围
|
||||
if (target < 0) target = 0;
|
||||
const maxScrollPosition = list.scrollWidth - container.offsetWidth +
|
||||
(container.offsetWidth % itemWidth); // 调整
|
||||
if (target > maxScrollPosition) target = maxScrollPosition;
|
||||
|
||||
// 滚动到指定位置
|
||||
container.scrollTo({
|
||||
left: target,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// 调试信息
|
||||
console.log('Item width:', itemWidth);
|
||||
console.log('Visible items:', visibleItems);
|
||||
console.log('Scrolling to position:', target);
|
||||
}
|
||||
|
||||
|
||||
if (btnLeft) {
|
||||
btnLeft.addEventListener('click', () => {
|
||||
scrollByStep(-1);
|
||||
@@ -211,6 +167,33 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
console.log('List width:', cardList.scrollWidth);
|
||||
console.log('Clone width:', clone.scrollWidth);
|
||||
console.log('Initial scroll position:', cardContainer.scrollLeft);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// -----------------------点击跳转服务案例页面对应项目--------------------------------
|
||||
document.querySelectorAll('.service-case-link').forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
// 传递 index 和 scroll 标记
|
||||
window.name = this.dataset.index + '|scroll';
|
||||
window.location.href = this.href;
|
||||
});
|
||||
});
|
||||
|
||||
// -------绑定banner箭头跳转--------------
|
||||
function handleCaseJump(selector) {
|
||||
document.querySelectorAll(selector).forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
window.name = this.dataset.index + '|scroll';
|
||||
window.location.href = this.href;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定banner箭头跳转
|
||||
handleCaseJump('.arrowBox[data-index]');
|
||||
});
|
||||
114
驭鑫/new yxsilicon/js/serviceCases.js
Normal file
114
驭鑫/new yxsilicon/js/serviceCases.js
Normal file
@@ -0,0 +1,114 @@
|
||||
// 假设放在 <script> 标签或单独 js 文件
|
||||
const caseData = [
|
||||
{
|
||||
title: "运算加速器H6PRO",
|
||||
img: "../imgs/case/h6pro.png",
|
||||
sections: [
|
||||
{ label: "产品概述", content: "搭载12nm工艺的NT0010B云计算专用芯片，作为云基础设施的核心节点，提供高效的计算能力，适用于大规模数据处理、高性能计算、人工智能等领域。" },
|
||||
// { label: "解决方案", content: "这里是H6PRO的解决方案描述..." },
|
||||
// { label: "技术亮点", content: "<ul><li>亮点1</li><li>亮点2</li></ul>" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "MY100服务器",
|
||||
img: "../imgs/case/my100.png",
|
||||
sections: [
|
||||
{ label: "产品概述", content: "搭载22nm工艺的云计算专用芯片，提供高性能的云计算服务，适用于数据中心、企业级应用、云计算平台等场景。" },
|
||||
// { label: "解决方案", content: "这里是MY100服务器的解决方案描述..." },
|
||||
// { label: "技术亮点", content: "<ul><li>亮点1</li><li>亮点2</li></ul>" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "C0040Z-服务器",
|
||||
img: "../imgs/case/c0040z.png",
|
||||
sections: [
|
||||
{ label: "产品概述", content: "采用水冷散热技术，确保服务器在高负载下稳定运行，适用于高性能计算、AI计算、大数据处理等领域。" },
|
||||
// { label: "解决方案", content: "这里是C0040Z服务器的解决方案描述..." },
|
||||
// { label: "技术亮点", content: "<ul><li>亮点1</li><li>亮点2</li></ul>" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "云计算水冷服务器",
|
||||
img: "../imgs/case/watercool.png",
|
||||
sections: [
|
||||
{ label: "客户需求", content: "客户需要为高性能计算（HPC）任务和AI计算提供稳定的服务器，要求服务器在高负载下具备良好的散热性能，并且能够保持较低的噪音水平。" },
|
||||
{ label: "解决方案", content: "我们为客户提供了一款基于水冷散热技术的服务器，采用高效水冷系统，确保在满负载运行的情况下，CPU和GPU温度始终保持在最优范围内。" },
|
||||
{ label: "技术亮点", content: `<ul>
|
||||
<li>水冷系统：采用液冷散热技术，能够快速有效地降低服务器内部的热量，避免因过热导致的性能瓶颈。</li>
|
||||
<li>高密度设计：支持多个GPU、CPU的并行计算，适用于大规模并行计算任务。</li>
|
||||
<li>低噪音：由于采用水冷技术，服务器噪音大幅度降低，适合用于数据中心和需要安静环境的场景。</li>
|
||||
</ul>` }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
function renderCaseDetail(index) {
|
||||
const data = caseData[index];
|
||||
const detail = document.getElementById('case-detail');
|
||||
detail.innerHTML = `
|
||||
<div class="case-detail-img">
|
||||
<img src="${data.img}" alt="${data.title}">
|
||||
</div>
|
||||
<div class="case-detail-title">${data.title}</div>
|
||||
${data.sections.map(sec => `
|
||||
<div class="case-detail-section">
|
||||
<p>${sec.label}</p>
|
||||
<span>${sec.content}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
`;
|
||||
}
|
||||
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const btns = document.querySelectorAll('.case-btn');
|
||||
let activeIndex = 0;
|
||||
let needScroll = false;
|
||||
|
||||
// 解析 window.name
|
||||
if (window.name) {
|
||||
const parts = window.name.split('|');
|
||||
if (!isNaN(parts[0])) {
|
||||
activeIndex = parseInt(parts[0], 10);
|
||||
}
|
||||
if (parts[1] === 'scroll') {
|
||||
needScroll = true;
|
||||
}
|
||||
window.name = '';
|
||||
localStorage.setItem('caseActiveIndex', activeIndex);
|
||||
} else {
|
||||
let savedIndex = localStorage.getItem('caseActiveIndex');
|
||||
activeIndex = savedIndex !== null ? parseInt(savedIndex, 10) : 0;
|
||||
}
|
||||
|
||||
// 初始化按钮状态
|
||||
btns.forEach((btn, idx) => {
|
||||
if (idx === activeIndex) {
|
||||
btn.classList.add('active');
|
||||
} else {
|
||||
btn.classList.remove('active');
|
||||
}
|
||||
});
|
||||
renderCaseDetail(activeIndex);
|
||||
|
||||
btns.forEach((btn, idx) => {
|
||||
btn.addEventListener('click', function() {
|
||||
btns.forEach(b => b.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
renderCaseDetail(this.dataset.index);
|
||||
localStorage.setItem('caseActiveIndex', this.dataset.index);
|
||||
});
|
||||
});
|
||||
|
||||
// 只有需要滚动时才滚动
|
||||
if (needScroll) {
|
||||
const caseSection = document.querySelector('.case-section');
|
||||
if (caseSection) {
|
||||
caseSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
// 如有固定头部可加 window.scrollBy(0, -60);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user