You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
4.1 KiB
129 lines
4.1 KiB
/**
|
|
* 投资者接待区块 JavaScript
|
|
* 处理基本的初始化和动画效果
|
|
*/
|
|
|
|
(function($) {
|
|
'use strict';
|
|
|
|
// 投资者接待管理器
|
|
window.investorReceptionManager = {
|
|
|
|
// 初始化
|
|
init: function() {
|
|
this.bindEvents();
|
|
this.initializeBlocks();
|
|
},
|
|
|
|
// 绑定事件
|
|
bindEvents: function() {
|
|
$(document).ready(() => {
|
|
this.setupResponsiveHandling();
|
|
});
|
|
},
|
|
|
|
// 初始化所有投资者接待区块
|
|
initializeBlocks: function() {
|
|
$('.investor-reception-block').each(function() {
|
|
const $block = $(this);
|
|
|
|
// 添加加载完成类
|
|
$block.addClass('loaded');
|
|
|
|
// 初始化图片懒加载
|
|
investorReceptionManager.initLazyLoading($block);
|
|
|
|
// 添加动画效果
|
|
investorReceptionManager.addAnimations($block);
|
|
});
|
|
},
|
|
|
|
// 设置响应式处理
|
|
setupResponsiveHandling: function() {
|
|
let resizeTimer;
|
|
|
|
$(window).on('resize', () => {
|
|
clearTimeout(resizeTimer);
|
|
resizeTimer = setTimeout(() => {
|
|
this.handleResize();
|
|
}, 250);
|
|
});
|
|
},
|
|
|
|
// 处理窗口大小变化
|
|
handleResize: function() {
|
|
$('.investor-reception-block').each(function() {
|
|
const $block = $(this);
|
|
investorReceptionManager.adjustLayout($block);
|
|
});
|
|
},
|
|
|
|
// 调整布局
|
|
adjustLayout: function($block) {
|
|
const windowWidth = $(window).width();
|
|
|
|
if (windowWidth <= 768) {
|
|
$block.addClass('mobile-layout');
|
|
} else {
|
|
$block.removeClass('mobile-layout');
|
|
}
|
|
},
|
|
|
|
// 初始化懒加载
|
|
initLazyLoading: function($block) {
|
|
const $image = $block.find('.reception-image');
|
|
|
|
if ($image.length && 'IntersectionObserver' in window) {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const $target = $(entry.target);
|
|
$target.addClass('loaded');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
});
|
|
|
|
observer.observe($image[0]);
|
|
}
|
|
},
|
|
|
|
// 添加动画效果
|
|
addAnimations: function($block) {
|
|
// 检查是否支持 Intersection Observer
|
|
if ('IntersectionObserver' in window) {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const $target = $(entry.target);
|
|
$target.addClass('animate-in');
|
|
|
|
// 延迟显示子元素
|
|
setTimeout(() => {
|
|
$target.find('.title-section').addClass('animate-in');
|
|
}, 200);
|
|
|
|
setTimeout(() => {
|
|
$target.find('.contact-section').addClass('animate-in');
|
|
}, 400);
|
|
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.2
|
|
});
|
|
|
|
observer.observe($block[0]);
|
|
} else {
|
|
// 降级处理：直接添加动画类
|
|
$block.addClass('animate-in');
|
|
$block.find('.title-section, .contact-section').addClass('animate-in');
|
|
}
|
|
}
|
|
};
|
|
|
|
// 初始化
|
|
investorReceptionManager.init();
|
|
|
|
})(jQuery); |