lizixuan/webs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

重写驭鑫网站 当前已完成 首页、关于驭鑫页面

Browse Source
This commit is contained in:
yaoqin
2025-05-16 15:04:20 +08:00
parent 4b4ecee679
commit c7dec1cf35
66 changed files with 2620 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
驭鑫/new yxsilicon/js/aboutYuxin.js Normal file
View File

@@ -0,0 +1,167 @@
// 将地图相关的变量和函数提升到全局作用域
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('地图容器不存在');
}
});

63
驭鑫/new yxsilicon/js/header.js Normal file
View 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';
// });
// });
// }
});

216
驭鑫/new yxsilicon/js/index.js Normal file
View 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);
}
});