add project files
This commit is contained in:
lzx
114
js/aboutUs.js
Normal file
114
js/aboutUs.js
Normal file
@@ -0,0 +1,114 @@
|
||||
function initAMap() {
|
||||
try {
|
||||
// 更新为完整地址
|
||||
const address = '广东省深圳市南山区粤海街道麻岭社区麻雀岭工业区M-6栋中钢大厦5A010';
|
||||
const companyName = '深圳汉晶电子信息有限公司';
|
||||
|
||||
// 创建地图实例
|
||||
let map = null;
|
||||
|
||||
// 地址解析
|
||||
AMap.plugin('AMap.Geocoder', function() {
|
||||
const geocoder = new AMap.Geocoder({
|
||||
city: "深圳",
|
||||
radius: 1000
|
||||
});
|
||||
|
||||
geocoder.getLocation(address, 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'
|
||||
});
|
||||
|
||||
// 更新标记信息
|
||||
const marker = new AMap.Marker({
|
||||
position: [lnglat.lng, lnglat.lat],
|
||||
title: companyName,
|
||||
animation: 'AMAP_ANIMATION_DROP',
|
||||
offset: new AMap.Pixel(-13, -30)
|
||||
});
|
||||
|
||||
map.add(marker);
|
||||
|
||||
// 更新信息窗体内容
|
||||
const content = `
|
||||
<div class="info-content" style="padding: 15px;">
|
||||
<h4 style="margin: 0 0 10px 0; color: #100B4E; font-size: 16px;">${companyName}</h4>
|
||||
<p style="margin: 0 0 8px 0; font-size: 13px;color: #100B4E;">
|
||||
<strong>地址：</strong>${address}
|
||||
</p>
|
||||
<p style="margin: 0 0 8px 0; font-size: 13px; color: #100B4E;">
|
||||
<strong>电话：</strong>13420976989
|
||||
</p>
|
||||
<p style="margin: 0; font-size: 13px; color: #100B4E;">
|
||||
<strong>Email：</strong>fu.bin@hjsilicon.com
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 创建信息窗体
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content: content,
|
||||
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);
|
||||
document.getElementById('mapContainer').innerHTML =
|
||||
'<div style="text-align:center;padding:20px;color:#f00;">地址定位失败，请刷新重试</div>';
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('地图初始化失败:', error);
|
||||
document.getElementById('mapContainer').innerHTML =
|
||||
'<div style="text-align:center;padding:20px;color:#f00;">地图加载失败，请刷新重试</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// DOM加载完成时初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (typeof AMap !== 'undefined') {
|
||||
initAMap();
|
||||
}
|
||||
});
|
||||
|
||||
// 回调函数
|
||||
window.initMap = function() {
|
||||
if (typeof AMap !== 'undefined') {
|
||||
initAMap();
|
||||
}
|
||||
};
|
||||
211
js/index.js
Normal file
211
js/index.js
Normal file
@@ -0,0 +1,211 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const elements = document.querySelectorAll('.perCent2');
|
||||
|
||||
const animatePercentage = (element) => {
|
||||
// 添加可见类，触发CSS过渡效果
|
||||
element.classList.add('visible');
|
||||
|
||||
let current = 1;
|
||||
const target = parseInt(element.getAttribute('data-target'));
|
||||
|
||||
// 重置为初始值
|
||||
element.textContent = '1%';
|
||||
|
||||
const timer = setInterval(() => {
|
||||
current += 1;
|
||||
element.textContent = `${current}%`;
|
||||
|
||||
if (current >= target) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 30);
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
animatePercentage(entry.target);
|
||||
} else {
|
||||
// 当元素离开视口时
|
||||
entry.target.classList.remove('visible');
|
||||
entry.target.textContent = '1%'; // 重置为初始值
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.5,
|
||||
rootMargin: '0px'
|
||||
});
|
||||
|
||||
elements.forEach(element => {
|
||||
// 初始状态设置
|
||||
element.classList.remove('visible');
|
||||
element.textContent = '1%';
|
||||
observer.observe(element);
|
||||
});
|
||||
|
||||
// ------------------------------
|
||||
// 获取所需的DOM元素
|
||||
const container = document.querySelector('.carousel-container');
|
||||
const list = document.querySelector('.carousel-list');
|
||||
const items = document.querySelectorAll('.carousel-item');
|
||||
const prevBtn = document.querySelector('.carousel-arrow-left');
|
||||
const nextBtn = document.querySelector('.carousel-arrow-right');
|
||||
const indicators = document.querySelectorAll('.indicator');
|
||||
|
||||
// 如果元素不存在，直接返回
|
||||
if (!container || !list || !items.length) {
|
||||
console.error('轮播图元素不存在，初始化失败');
|
||||
return;
|
||||
}
|
||||
|
||||
// 克隆第一个和最后一个项目
|
||||
const firstClone = items[0].cloneNode(true);
|
||||
const lastClone = items[items.length - 1].cloneNode(true);
|
||||
|
||||
// 将克隆的元素添加到列表中
|
||||
list.appendChild(firstClone);
|
||||
list.insertBefore(lastClone, list.firstChild);
|
||||
|
||||
// 设置初始位置，因为添加了一个项目在前面，所以从1开始
|
||||
let currentIndex = 1;
|
||||
let interval = null;
|
||||
let isTransitioning = false;
|
||||
|
||||
// 初始化位置
|
||||
updatePosition(false);
|
||||
|
||||
// 更新位置的函数
|
||||
function updatePosition(withTransition = true) {
|
||||
// 如果需要过渡动画
|
||||
if (withTransition) {
|
||||
list.style.transition = 'transform 0.5s ease';
|
||||
} else {
|
||||
list.style.transition = 'none';
|
||||
}
|
||||
|
||||
// 计算位置并应用变换
|
||||
const position = -currentIndex * 100;
|
||||
list.style.transform = `translateX(${position}%)`;
|
||||
|
||||
// 更新指示器状态，注意要减去1因为我们添加了克隆项目
|
||||
updateIndicators();
|
||||
}
|
||||
|
||||
// 更新指示器状态
|
||||
function updateIndicators() {
|
||||
// 考虑循环，将currentIndex转换回真实索引
|
||||
const realIndex = currentIndex - 1;
|
||||
// 使用模运算确保索引在有效范围内
|
||||
const activeIndex = (realIndex + items.length) % items.length;
|
||||
|
||||
indicators.forEach((indicator, i) => {
|
||||
indicator.classList.toggle('active', i === activeIndex);
|
||||
});
|
||||
}
|
||||
|
||||
// 自动播放函数
|
||||
function startAutoPlay() {
|
||||
if (interval) clearInterval(interval);
|
||||
interval = setInterval(nextSlide, 3000);
|
||||
}
|
||||
|
||||
// 暂停自动播放
|
||||
function stopAutoPlay() {
|
||||
clearInterval(interval);
|
||||
}
|
||||
|
||||
// 下一张函数
|
||||
function nextSlide() {
|
||||
if (isTransitioning) return;
|
||||
isTransitioning = true;
|
||||
|
||||
currentIndex++;
|
||||
updatePosition();
|
||||
}
|
||||
|
||||
// 上一张函数
|
||||
function prevSlide() {
|
||||
if (isTransitioning) return;
|
||||
isTransitioning = true;
|
||||
|
||||
currentIndex--;
|
||||
updatePosition();
|
||||
}
|
||||
|
||||
// 处理过渡结束事件
|
||||
list.addEventListener('transitionend', () => {
|
||||
isTransitioning = false;
|
||||
|
||||
// 如果到达了最后一个克隆项
|
||||
if (currentIndex >= items.length + 1) {
|
||||
currentIndex = 1;
|
||||
updatePosition(false);
|
||||
}
|
||||
|
||||
// 如果到达了第一个克隆项
|
||||
if (currentIndex <= 0) {
|
||||
currentIndex = items.length;
|
||||
updatePosition(false);
|
||||
}
|
||||
});
|
||||
|
||||
// // 绑定按钮事件
|
||||
// prevBtn.addEventListener('click', () => {
|
||||
// prevSlide();
|
||||
// stopAutoPlay();
|
||||
// startAutoPlay();
|
||||
// });
|
||||
|
||||
// nextBtn.addEventListener('click', () => {
|
||||
// nextSlide();
|
||||
// stopAutoPlay();
|
||||
// startAutoPlay();
|
||||
// });
|
||||
|
||||
// 绑定指示器点击事件
|
||||
indicators.forEach((indicator, index) => {
|
||||
indicator.addEventListener('click', () => {
|
||||
currentIndex = index + 1; // +1因为我们添加了克隆项目
|
||||
updatePosition();
|
||||
stopAutoPlay();
|
||||
startAutoPlay();
|
||||
});
|
||||
});
|
||||
|
||||
// 鼠标悬停暂停
|
||||
container.addEventListener('mouseenter', stopAutoPlay);
|
||||
container.addEventListener('mouseleave', startAutoPlay);
|
||||
|
||||
// 添加触摸滑动支持
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
container.addEventListener('touchstart', (e) => {
|
||||
touchStartX = e.touches[0].clientX;
|
||||
stopAutoPlay();
|
||||
});
|
||||
|
||||
container.addEventListener('touchend', (e) => {
|
||||
touchEndX = e.changedTouches[0].clientX;
|
||||
const difference = touchStartX - touchEndX;
|
||||
|
||||
if (Math.abs(difference) > 50) {
|
||||
if (difference > 0) {
|
||||
nextSlide();
|
||||
} else {
|
||||
prevSlide();
|
||||
}
|
||||
}
|
||||
|
||||
startAutoPlay();
|
||||
});
|
||||
|
||||
// 开始自动播放
|
||||
startAutoPlay();
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
28
js/mainBusiness.js
Normal file
28
js/mainBusiness.js
Normal file
@@ -0,0 +1,28 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const accordionItems = document.querySelectorAll('.accordion-item');
|
||||
|
||||
// 为每个手风琴项添加点击事件
|
||||
accordionItems.forEach((item, index) => {
|
||||
const header = item.querySelector('.accordion-header');
|
||||
|
||||
header.addEventListener('click', () => {
|
||||
// 获取当前是否激活
|
||||
const isActive = item.classList.contains('active');
|
||||
|
||||
// 关闭所有项
|
||||
accordionItems.forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
|
||||
// 如果点击的不是当前激活项，则展开它
|
||||
if (!isActive) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// 默认展开第一项
|
||||
if (index === 0) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
98
js/ourProducts.js
Normal file
98
js/ourProducts.js
Normal file
@@ -0,0 +1,98 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 获取URL参数中的产品ID
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const productId = urlParams.get('product');
|
||||
|
||||
// 显示产品的函数
|
||||
function showProduct(productId, shouldScroll = false) { // 默认不滚动
|
||||
console.log('Showing product:', productId);
|
||||
|
||||
// 移除所有产品项的active类
|
||||
const productItems = document.querySelectorAll('.product-item');
|
||||
productItems.forEach(p => {
|
||||
p.classList.remove('active');
|
||||
});
|
||||
|
||||
// 找到对应的产品项并添加active类
|
||||
const targetItem = document.querySelector(`[data-product="${productId}"]`);
|
||||
if (targetItem) {
|
||||
targetItem.classList.add('active');
|
||||
|
||||
// 确保产品所在的分类是展开的
|
||||
const category = targetItem.closest('.category-content');
|
||||
if (category) {
|
||||
// 先移除所有分类的show类
|
||||
document.querySelectorAll('.category-content').forEach(c => {
|
||||
c.classList.remove('show');
|
||||
});
|
||||
document.querySelectorAll('.category-header').forEach(h => {
|
||||
h.classList.remove('active');
|
||||
});
|
||||
|
||||
// 展开当前分类
|
||||
category.classList.add('show');
|
||||
const categoryHeader = category.previousElementSibling;
|
||||
if (categoryHeader) {
|
||||
categoryHeader.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏所有详情内容
|
||||
document.querySelectorAll('.detail-content').forEach(content => {
|
||||
if (content) {
|
||||
content.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// 显示目标产品详情
|
||||
const targetContent = document.getElementById(productId);
|
||||
if (targetContent) {
|
||||
targetContent.style.display = 'block';
|
||||
}
|
||||
|
||||
// 只在指定需要滚动时才滚动
|
||||
if (shouldScroll) {
|
||||
setTimeout(() => {
|
||||
targetItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化：根据URL参数决定行为
|
||||
if (productId) {
|
||||
// 如果有产品ID参数，则显示对应产品并滚动
|
||||
showProduct(productId, true); // 有参数时滚动
|
||||
} else {
|
||||
// 没有参数时，显示第一个产品但不滚动
|
||||
const firstProduct = document.querySelector('.product-item');
|
||||
if (firstProduct) {
|
||||
showProduct(firstProduct.dataset.product, false); // 无参数时不滚动
|
||||
}
|
||||
}
|
||||
|
||||
// 产品项点击处理
|
||||
const productItems = document.querySelectorAll('.product-item');
|
||||
productItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const productId = this.dataset.product;
|
||||
// 点击产品项时需要滚动
|
||||
showProduct(productId, true);
|
||||
updateURL(productId);
|
||||
});
|
||||
});
|
||||
|
||||
// 更新URL函数
|
||||
function updateURL(productId) {
|
||||
const newURL = new URL(window.location.href);
|
||||
newURL.searchParams.set('product', productId);
|
||||
window.history.pushState({ productId }, '', newURL);
|
||||
}
|
||||
|
||||
// 处理浏览器后退/前进
|
||||
window.addEventListener('popstate', function(event) {
|
||||
if (event.state && event.state.productId) {
|
||||
showProduct(event.state.productId, true);
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user