/** * Block Cooperate JavaScript * 合作伙伴区块交互功能 * * @package Nenghui Energy Theme * @since 1.0.0 */ (function($) { 'use strict'; /** * 合作伙伴区块初始化 */ function initCooperateBlock() { const $cooperateBlocks = $('.cooperate-block'); if ($cooperateBlocks.length === 0) { return; } $cooperateBlocks.each(function() { const $block = $(this); const $carousel = $block.find('.cooperate-carousel'); const $slides = $block.find('.carousel-slide'); // 添加淡入动画 addFadeInAnimation($block); // 添加悬停效果增强 addHoverEffects($slides); // 添加键盘导航支持 addKeyboardNavigation($slides); // 添加无障碍支持 addAccessibilitySupport($slides); }); } /** * 添加淡入动画 */ function addFadeInAnimation($block) { // 使用Intersection Observer API实现滚动触发动画 if ('IntersectionObserver' in window) { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { $(entry.target).addClass('animate-in'); observer.unobserve(entry.target); } }); }, { threshold: 0.1, rootMargin: '50px' }); observer.observe($block[0]); } else { // 降级处理:直接添加动画类 $block.addClass('animate-in'); } } /** * 添加悬停效果增强 */ function addHoverEffects($slides) { $slides.each(function() { const $slide = $(this); const $img = $slide.find('img'); $slide.on('mouseenter', function() { // 添加悬停时的缩放效果 $img.css('transform', 'scale(1.05)'); // 其他幻灯片稍微变暗 $slides.not(this).addClass('dimmed'); }); $slide.on('mouseleave', function() { // 恢复原始状态 $img.css('transform', 'scale(1)'); $slides.removeClass('dimmed'); }); }); } /** * 添加键盘导航支持 */ function addKeyboardNavigation($slides) { $slides.attr('tabindex', '0').on('keydown', function(e) { const $current = $(this); let $target; switch(e.which) { case 37: // 左箭头 e.preventDefault(); $target = $current.prev('.carousel-slide'); if ($target.length === 0) { $target = $slides.last(); } $target.focus(); break; case 39: // 右箭头 e.preventDefault(); $target = $current.next('.carousel-slide'); if ($target.length === 0) { $target = $slides.first(); } $target.focus(); break; case 13: // 回车键 case 32: // 空格键 e.preventDefault(); $current.trigger('click'); break; } }); } /** * 添加无障碍支持 */ function addAccessibilitySupport($slides) { $slides.each(function(index) { const $slide = $(this); const $img = $slide.find('img'); const altText = $img.attr('alt') || '合作伙伴'; // 添加ARIA标签 $slide.attr({ 'role': 'button', 'aria-label': `查看${altText}详情,第${index + 1}个合作伙伴,共${$slides.length}个`, 'aria-describedby': 'cooperate-instructions' }); }); // 添加使用说明(对屏幕阅读器可见) const $instructions = $('
', { id: 'cooperate-instructions', class: 'sr-only', text: '使用左右箭头键导航合作伙伴,按回车键或空格键查看详情' }); $('.cooperate-block').first().append($instructions); } /** * 响应式处理 */ function handleResponsive() { const $cooperateBlocks = $('.cooperate-block'); const windowWidth = $(window).width(); $cooperateBlocks.each(function() { const $block = $(this); const $wrapper = $block.find('.carousel-wrapper'); // 根据屏幕宽度调整布局 if (windowWidth <= 480) { $wrapper.addClass('mobile-layout'); } else { $wrapper.removeClass('mobile-layout'); } }); } /** * 性能优化:图片懒加载 */ function initLazyLoading() { if ('IntersectionObserver' in window) { const imageObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const $img = $(entry.target); const src = $img.attr('src'); if (src) { $img.on('load', function() { $(this).addClass('loaded'); }).on('error', function() { $(this).addClass('error'); console.warn('Failed to load cooperate partner image:', src); }); } imageObserver.unobserve(entry.target); } }); }); $('.cooperate-block img').each(function() { imageObserver.observe(this); }); } } // 文档就绪时初始化 $(document).ready(function() { initCooperateBlock(); initLazyLoading(); handleResponsive(); }); // 窗口大小改变时重新处理响应式 $(window).on('resize', debounce(handleResponsive, 250)); /** * 防抖函数 */ function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } })(jQuery);