v1.0.0
This commit is contained in:
lzx
176
js/aboutYuxin.js
Normal file
176
js/aboutYuxin.js
Normal file
@@ -0,0 +1,176 @@
|
||||
// 将地图相关的变量和函数提升到全局作用域
|
||||
let map = null;
|
||||
let marker = null;
|
||||
let infoWindow = null;
|
||||
|
||||
// 地图数据配置
|
||||
const mapData = {
|
||||
address: {
|
||||
zh: '广东省深圳市南山区高新中三道2号软件园一期7栋303室',
|
||||
en: ''
|
||||
},
|
||||
companyName: {
|
||||
zh: '深圳驭鑫科技有限公司',
|
||||
en: ''
|
||||
},
|
||||
phone:{
|
||||
zh: '13420976989',
|
||||
en: '+86 13420976989'
|
||||
},
|
||||
|
||||
contactInfo: {
|
||||
zh: {
|
||||
address: '地址',
|
||||
phone: '电话',
|
||||
email: '邮箱'
|
||||
},
|
||||
en: {
|
||||
address: 'Address',
|
||||
phone: 'Phone',
|
||||
email: 'Email'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 创建信息窗体内容
|
||||
function createInfoWindowContent(lang) {
|
||||
return `
|
||||
<div class="info-content" style="padding: 15px;">
|
||||
<h4 style="margin: 0 0 10px 0; color: #100B4E; font-size: 16px;">${mapData.companyName[lang]}</h4>
|
||||
<p style="margin: 0 0 8px 0; font-size: 13px;color: #100B4E;">
|
||||
<strong>${mapData.contactInfo[lang].address}：</strong>${mapData.address[lang]}
|
||||
</p>
|
||||
|
||||
<p style="margin: 0; font-size: 13px; color: #100B4E;">
|
||||
<strong>${mapData.contactInfo[lang].email}：</strong>zmz@yxsilicon.com
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 更新地图信息
|
||||
function updateMapInfo(lang) {
|
||||
if (marker && infoWindow) {
|
||||
// 更新标记标题
|
||||
marker.setTitle(mapData.companyName[lang]);
|
||||
|
||||
// 更新信息窗体内容
|
||||
infoWindow.setContent(createInfoWindowContent(lang));
|
||||
|
||||
// 如果信息窗体是打开状态，重新打开以更新内容
|
||||
if (infoWindow.getIsOpen()) {
|
||||
infoWindow.open(map, marker.getPosition());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化地图
|
||||
function initAMap() {
|
||||
try {
|
||||
// 获取当前语言
|
||||
const currentLang = window.currentLang || localStorage.getItem('siteLang') || "zh";
|
||||
|
||||
// 先加载所需插件
|
||||
AMap.plugin(['AMap.Geocoder', 'AMap.ToolBar', 'AMap.Scale'], function() {
|
||||
const geocoder = new AMap.Geocoder({
|
||||
city: "深圳",
|
||||
radius: 1000
|
||||
});
|
||||
|
||||
geocoder.getLocation(mapData.address.zh, function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
const lnglat = result.geocodes[0].location;
|
||||
|
||||
// 创建地图实例
|
||||
map = new AMap.Map('mapContainer', {
|
||||
zoom: 16,
|
||||
center: [lnglat.lng, lnglat.lat],
|
||||
viewMode: '3D',
|
||||
resizeEnable: true,
|
||||
pitch: 40,
|
||||
mapStyle: 'amap://styles/normal'
|
||||
});
|
||||
|
||||
// 创建标记
|
||||
marker = new AMap.Marker({
|
||||
position: [lnglat.lng, lnglat.lat],
|
||||
title: mapData.companyName[currentLang],
|
||||
animation: 'AMAP_ANIMATION_DROP',
|
||||
offset: new AMap.Pixel(-13, -30)
|
||||
});
|
||||
|
||||
map.add(marker);
|
||||
|
||||
// 创建信息窗体
|
||||
infoWindow = new AMap.InfoWindow({
|
||||
content: createInfoWindowContent(currentLang),
|
||||
offset: new AMap.Pixel(0, -30),
|
||||
closeWhenClickMap: true
|
||||
});
|
||||
|
||||
// 地图加载完成后打开信息窗体
|
||||
map.on('complete', function() {
|
||||
infoWindow.open(map, [lnglat.lng, lnglat.lat]);
|
||||
});
|
||||
|
||||
// 点击标记时打开信息窗体
|
||||
marker.on('click', function() {
|
||||
infoWindow.open(map, marker.getPosition());
|
||||
});
|
||||
|
||||
// 添加控件
|
||||
map.addControl(new AMap.ToolBar({
|
||||
position: 'RB'
|
||||
}));
|
||||
|
||||
map.addControl(new AMap.Scale());
|
||||
|
||||
// 确保标记点居中显示
|
||||
map.setFitView([marker]);
|
||||
|
||||
// 响应式处理
|
||||
window.addEventListener('resize', function() {
|
||||
map.resize();
|
||||
map.setCenter([lnglat.lng, lnglat.lat]);
|
||||
});
|
||||
} else {
|
||||
console.error('地址解析失败:', result);
|
||||
const mapContainer = document.getElementById('mapContainer');
|
||||
if (mapContainer) {
|
||||
mapContainer.innerHTML =
|
||||
'<div style="text-align:center;padding:20px;color:#f00;">地址定位失败，请刷新重试</div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('地图初始化失败:', error);
|
||||
const mapContainer = document.getElementById('mapContainer');
|
||||
if (mapContainer) {
|
||||
mapContainer.innerHTML =
|
||||
'<div style="text-align:center;padding:20px;color:#f00;">地图加载失败，请刷新重试</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 在文件末尾添加
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 确保地图容器存在
|
||||
const mapContainer = document.getElementById('mapContainer');
|
||||
if (mapContainer) {
|
||||
// 初始化地图
|
||||
initAMap();
|
||||
} else {
|
||||
console.error('地图容器不存在');
|
||||
}
|
||||
if (window.location.hash === '#address-li') {
|
||||
const addressLi = document.getElementById('address-li');
|
||||
if (addressLi) {
|
||||
addressLi.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
9
js/footer.js
Normal file
9
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;
|
||||
});
|
||||
});
|
||||
});
|
||||
63
js/header.js
Normal file
63
js/header.js
Normal file
@@ -0,0 +1,63 @@
|
||||
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';
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
});
|
||||
218
js/index.js
Normal file
218
js/index.js
Normal file
@@ -0,0 +1,218 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
|
||||
|
||||
|
||||
/** 关于驭鑫箭头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();
|
||||
|
||||
// 动态获取单个brand-item的宽度（含margin）
|
||||
function getItemWidth() {
|
||||
const item = list.querySelector('.brand-item');
|
||||
if (!item) return 200;
|
||||
const style = getComputedStyle(item);
|
||||
// 只加margin-right，因为只有右间隔
|
||||
return item.offsetWidth + parseFloat(style.marginRight || 0);
|
||||
}
|
||||
|
||||
// 修改后的滚动逻辑
|
||||
function scrollByStep(step) {
|
||||
isHovering = true;
|
||||
if (pauseTimer) clearTimeout(pauseTimer);
|
||||
pauseTimer = setTimeout(() => { isHovering = false; }, 1500);
|
||||
|
||||
const items = list.querySelectorAll('.brand-item');
|
||||
if (items.length === 0) return;
|
||||
|
||||
// 动态计算每个项目的宽度（包括margin）
|
||||
const itemWidths = Array.from(items).map(item => {
|
||||
const style = getComputedStyle(item);
|
||||
return item.offsetWidth + parseFloat(style.marginRight || 0);
|
||||
});
|
||||
|
||||
// 计算当前第一个完整显示的项目的索引
|
||||
let currentScroll = container.scrollLeft;
|
||||
let currentIndex = 0;
|
||||
let accumulatedWidth = 0;
|
||||
|
||||
for (let i = 0; i < itemWidths.length; i++) {
|
||||
accumulatedWidth += itemWidths[i];
|
||||
if (accumulatedWidth > currentScroll) {
|
||||
currentIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 计算目标索引，每次滑动3个项目
|
||||
let targetIndex = currentIndex + step * 3;
|
||||
targetIndex = Math.max(0, Math.min(targetIndex, items.length - 1));
|
||||
|
||||
// 计算目标滚动位置
|
||||
let targetScroll = 0;
|
||||
for (let i = 0; i < targetIndex; i++) {
|
||||
targetScroll += itemWidths[i];
|
||||
}
|
||||
|
||||
// 限制最大滚动距离
|
||||
const maxScroll = list.scrollWidth - container.offsetWidth;
|
||||
targetScroll = Math.min(targetScroll, maxScroll);
|
||||
|
||||
// 应用滚动
|
||||
container.scrollTo({
|
||||
left: targetScroll,
|
||||
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);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// -----------------------点击跳转服务案例页面对应项目--------------------------------
|
||||
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
js/serviceCases.js
Normal file
114
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: "采用水冷散热技术，确保服务器在高负载下稳定运行，适用于高性能计算、大数据处理等领域。" },
|
||||
// { label: "解决方案", content: "这里是C0040Z服务器的解决方案描述..." },
|
||||
// { label: "技术亮点", content: "<ul><li>亮点1</li><li>亮点2</li></ul>" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "云计算水冷服务器",
|
||||
img: "../imgs/case/watercool.png",
|
||||
sections: [
|
||||
{ label: "客户需求", content: "客户需要为高性能计算（HPC）任务,提供稳定的服务器，要求服务器在高负载下具备良好的散热性能，并且能够保持较低的噪音水平。" },
|
||||
{ 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