Refactor and enhance various HTML pages with updated links, improved styles, and optimized JavaScript functionality
- Updated badge styles in culture.html for better visual consistency and added backdrop-filter support. - Introduced a fallback panel for the map in index.html with enhanced styles and responsive design. - Changed links in product_ecommerce_freight_booking.html, product_full_logistics_chain_cargo_agent.html, product_full_logistics_chain_platform.html, product_full_logistics_chain_ship_agent.html, product_port_cdi_container.html, product_shipping_boat.html, product_shipping_company.html to point to new URLs with query parameters. - Improved scroll reveal functionality in solution_inland_river_shipping.html, solution_logistics_chain.html, solution_port_supply_chain.html, and solution_supply_chain.html by replacing forEach with a traditional for loop for better performance.
This commit is contained in:
@@ -6,72 +6,104 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// 等待DOM加载完成
|
||||
document.addEventListener('DOMContentLoaded', initTimeline);
|
||||
|
||||
function forEachNode(list, callback) {
|
||||
Array.prototype.forEach.call(list, callback);
|
||||
}
|
||||
|
||||
function supportsSmoothScroll() {
|
||||
return 'scrollBehavior' in document.documentElement.style;
|
||||
}
|
||||
|
||||
function initTimeline() {
|
||||
const container = document.querySelector('.timeline-container');
|
||||
var container = document.querySelector('.timeline-container');
|
||||
if (!container) return;
|
||||
|
||||
const items = container.querySelectorAll('.timeline-item');
|
||||
var items = container.querySelectorAll('.timeline-item');
|
||||
if (!items.length) return;
|
||||
|
||||
// 入场动画 - 使用 Intersection Observer
|
||||
const observerOptions = {
|
||||
var hasIntersectionObserver = 'IntersectionObserver' in window;
|
||||
var touchStartX = null;
|
||||
var scrollLeft = null;
|
||||
var isDragging = false;
|
||||
var startX;
|
||||
var dragScrollLeft;
|
||||
var currentIndex = 0;
|
||||
var autoPlayIndex = 0;
|
||||
var autoPlayTimer = null;
|
||||
var isUserInteracting = false;
|
||||
var interactionTimer = null;
|
||||
var autoPlayInterval = 3000;
|
||||
var pauseAfterInteraction = 5000;
|
||||
var observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
animateItems();
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
function updateExpandedState(active) {
|
||||
if (active) {
|
||||
container.classList.add('has-auto-expanded');
|
||||
} else {
|
||||
container.classList.remove('has-auto-expanded');
|
||||
}
|
||||
}
|
||||
|
||||
function clearExpandedItems() {
|
||||
forEachNode(items, function(item) {
|
||||
item.classList.remove('auto-expanded');
|
||||
});
|
||||
}, observerOptions);
|
||||
updateExpandedState(false);
|
||||
}
|
||||
|
||||
observer.observe(container);
|
||||
|
||||
// 节点逐个入场动画
|
||||
function animateItems() {
|
||||
items.forEach((item, index) => {
|
||||
setTimeout(() => {
|
||||
function animateItems(useDelay) {
|
||||
forEachNode(items, function(item, index) {
|
||||
var delay = useDelay ? index * 80 : 0;
|
||||
setTimeout(function() {
|
||||
item.style.opacity = '1';
|
||||
item.style.transform = 'translateY(0)';
|
||||
}, index * 80);
|
||||
}, delay);
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化节点样式（用于动画）
|
||||
items.forEach(item => {
|
||||
forEachNode(items, function(item) {
|
||||
item.style.opacity = '0';
|
||||
item.style.transform = 'translateY(20px)';
|
||||
item.style.transition = 'opacity 0.5s ease, transform 0.5s ease, flex 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.5s ease';
|
||||
});
|
||||
|
||||
// 触摸设备支持
|
||||
let touchStartX = null;
|
||||
let scrollLeft = null;
|
||||
if (hasIntersectionObserver) {
|
||||
var observer = new IntersectionObserver(function(entries) {
|
||||
for (var entryIndex = 0; entryIndex < entries.length; entryIndex += 1) {
|
||||
if (entries[entryIndex].isIntersecting) {
|
||||
animateItems(true);
|
||||
observer.unobserve(entries[entryIndex].target);
|
||||
}
|
||||
}
|
||||
}, observerOptions);
|
||||
|
||||
container.addEventListener('touchstart', (e) => {
|
||||
observer.observe(container);
|
||||
} else {
|
||||
animateItems(false);
|
||||
}
|
||||
|
||||
container.addEventListener('touchstart', function(e) {
|
||||
touchStartX = e.touches[0].pageX;
|
||||
scrollLeft = container.scrollLeft;
|
||||
}, { passive: true });
|
||||
|
||||
container.addEventListener('touchmove', (e) => {
|
||||
container.addEventListener('touchmove', function(e) {
|
||||
if (!touchStartX) return;
|
||||
const x = e.touches[0].pageX;
|
||||
const walk = (touchStartX - x) * 1.5;
|
||||
var x = e.touches[0].pageX;
|
||||
var walk = (touchStartX - x) * 1.5;
|
||||
container.scrollLeft = scrollLeft + walk;
|
||||
}, { passive: true });
|
||||
|
||||
container.addEventListener('touchend', () => {
|
||||
container.addEventListener('touchend', function() {
|
||||
touchStartX = null;
|
||||
});
|
||||
|
||||
// 鼠标滚轮横向滚动（移动端视图时）
|
||||
container.addEventListener('wheel', (e) => {
|
||||
container.addEventListener('wheel', function(e) {
|
||||
if (container.scrollWidth > container.clientWidth) {
|
||||
if (Math.abs(e.deltaX) < Math.abs(e.deltaY)) {
|
||||
e.preventDefault();
|
||||
@@ -80,56 +112,46 @@
|
||||
}
|
||||
}, { passive: false });
|
||||
|
||||
// 拖拽滚动（移动端视图时）
|
||||
let isDragging = false;
|
||||
let startX;
|
||||
let dragScrollLeft;
|
||||
|
||||
container.addEventListener('mousedown', (e) => {
|
||||
container.addEventListener('mousedown', function(e) {
|
||||
if (container.scrollWidth <= container.clientWidth) return;
|
||||
if (e.target.closest('.timeline-item')) return;
|
||||
if (e.target.closest && e.target.closest('.timeline-item')) return;
|
||||
isDragging = true;
|
||||
container.style.cursor = 'grabbing';
|
||||
startX = e.pageX - container.offsetLeft;
|
||||
dragScrollLeft = container.scrollLeft;
|
||||
});
|
||||
|
||||
container.addEventListener('mouseleave', () => {
|
||||
container.addEventListener('mouseleave', function() {
|
||||
isDragging = false;
|
||||
container.style.cursor = '';
|
||||
});
|
||||
|
||||
container.addEventListener('mouseup', () => {
|
||||
container.addEventListener('mouseup', function() {
|
||||
isDragging = false;
|
||||
container.style.cursor = '';
|
||||
});
|
||||
|
||||
container.addEventListener('mousemove', (e) => {
|
||||
container.addEventListener('mousemove', function(e) {
|
||||
if (!isDragging) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX - container.offsetLeft;
|
||||
const walk = (x - startX) * 2;
|
||||
var x = e.pageX - container.offsetLeft;
|
||||
var walk = (x - startX) * 2;
|
||||
container.scrollLeft = dragScrollLeft - walk;
|
||||
});
|
||||
|
||||
// 节点点击事件（可扩展）
|
||||
items.forEach((item) => {
|
||||
item.addEventListener('click', () => {
|
||||
// 添加点击反馈动画
|
||||
const dot = item.querySelector('.dot');
|
||||
forEachNode(items, function(item) {
|
||||
item.addEventListener('click', function() {
|
||||
var dot = item.querySelector('.dot');
|
||||
if (dot) {
|
||||
dot.style.transform = 'translate(-50%, -50%) scale(2)';
|
||||
setTimeout(() => {
|
||||
setTimeout(function() {
|
||||
dot.style.transform = '';
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 键盘导航支持
|
||||
let currentIndex = 0;
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (!isElementInViewport(container)) return;
|
||||
|
||||
if (e.key === 'ArrowLeft') {
|
||||
@@ -144,42 +166,32 @@
|
||||
function scrollToItem(index) {
|
||||
if (container.scrollWidth <= container.clientWidth) return;
|
||||
|
||||
const item = items[index];
|
||||
var item = items[index];
|
||||
if (!item) return;
|
||||
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
const itemRect = item.getBoundingClientRect();
|
||||
var containerRect = container.getBoundingClientRect();
|
||||
var itemRect = item.getBoundingClientRect();
|
||||
var targetScrollLeft = container.scrollLeft + (itemRect.left - containerRect.left) - (containerRect.width / 2) + (itemRect.width / 2);
|
||||
|
||||
const targetScrollLeft = container.scrollLeft + (itemRect.left - containerRect.left) - (containerRect.width / 2) + (itemRect.width / 2);
|
||||
if (typeof container.scrollTo === 'function' && supportsSmoothScroll()) {
|
||||
container.scrollTo({
|
||||
left: targetScrollLeft,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
container.scrollTo({
|
||||
left: targetScrollLeft,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
container.scrollLeft = targetScrollLeft;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 自动轮播功能 - 从左到右循环展开
|
||||
// ============================================
|
||||
let autoPlayIndex = 0;
|
||||
let autoPlayTimer = null;
|
||||
let isUserInteracting = false;
|
||||
const autoPlayInterval = 3000; // 每个节点展开持续时间（毫秒）
|
||||
const pauseAfterInteraction = 5000; // 用户交互后暂停时间（毫秒）
|
||||
|
||||
// 添加自动展开的CSS类
|
||||
function expandItem(index) {
|
||||
// 移除所有节点的展开状态
|
||||
items.forEach(item => {
|
||||
item.classList.remove('auto-expanded');
|
||||
});
|
||||
// 给当前节点添加展开状态
|
||||
clearExpandedItems();
|
||||
if (items[index]) {
|
||||
items[index].classList.add('auto-expanded');
|
||||
updateExpandedState(true);
|
||||
}
|
||||
}
|
||||
|
||||
// 自动轮播
|
||||
function autoPlay() {
|
||||
if (isUserInteracting) return;
|
||||
|
||||
@@ -187,63 +199,56 @@
|
||||
autoPlayIndex = (autoPlayIndex + 1) % items.length;
|
||||
}
|
||||
|
||||
// 启动自动轮播
|
||||
function startAutoPlay() {
|
||||
if (autoPlayTimer) return;
|
||||
autoPlayTimer = setInterval(autoPlay, autoPlayInterval);
|
||||
// 立即展开第一个
|
||||
autoPlay();
|
||||
}
|
||||
|
||||
// 停止自动轮播
|
||||
function stopAutoPlay() {
|
||||
if (autoPlayTimer) {
|
||||
clearInterval(autoPlayTimer);
|
||||
autoPlayTimer = null;
|
||||
}
|
||||
// 移除所有展开状态
|
||||
items.forEach(item => {
|
||||
item.classList.remove('auto-expanded');
|
||||
});
|
||||
clearExpandedItems();
|
||||
}
|
||||
|
||||
// 用户交互时暂停自动轮播
|
||||
function pauseAutoPlay() {
|
||||
isUserInteracting = true;
|
||||
stopAutoPlay();
|
||||
|
||||
// 一段时间后恢复自动轮播
|
||||
setTimeout(() => {
|
||||
if (interactionTimer) {
|
||||
clearTimeout(interactionTimer);
|
||||
}
|
||||
|
||||
interactionTimer = setTimeout(function() {
|
||||
isUserInteracting = false;
|
||||
if (isElementInViewport(container)) {
|
||||
if (hasIntersectionObserver && isElementInViewport(container)) {
|
||||
startAutoPlay();
|
||||
}
|
||||
}, pauseAfterInteraction);
|
||||
}
|
||||
|
||||
// 监听用户交互
|
||||
container.addEventListener('mouseenter', pauseAutoPlay);
|
||||
container.addEventListener('touchstart', pauseAutoPlay, { passive: true });
|
||||
|
||||
// 使用 Intersection Observer 控制自动轮播
|
||||
const autoPlayObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting && !isUserInteracting) {
|
||||
startAutoPlay();
|
||||
} else {
|
||||
stopAutoPlay();
|
||||
if (hasIntersectionObserver) {
|
||||
var autoPlayObserver = new IntersectionObserver(function(entries) {
|
||||
for (var entryIndex = 0; entryIndex < entries.length; entryIndex += 1) {
|
||||
if (entries[entryIndex].isIntersecting && !isUserInteracting) {
|
||||
startAutoPlay();
|
||||
} else {
|
||||
stopAutoPlay();
|
||||
}
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.3 });
|
||||
}, { threshold: 0.3 });
|
||||
|
||||
autoPlayObserver.observe(container);
|
||||
|
||||
console.log("Timeline Loaded with Enhanced Labels and Positioning");
|
||||
autoPlayObserver.observe(container);
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数：检查元素是否在视口中
|
||||
function isElementInViewport(el) {
|
||||
const rect = el.getBoundingClientRect();
|
||||
var rect = el.getBoundingClientRect();
|
||||
return (
|
||||
rect.top < window.innerHeight &&
|
||||
rect.bottom > 0
|
||||
|
||||
Reference in New Issue
Block a user