$(function () { var initLine = {}; function widthRest() { let $mo_HeadID = $('.header--26').closest('[id*="c_"]'); let mo_HeadHei = $('.header--26').closest('[id*="c_"]').height(); let screenWidth = $(window).width(); let pageUrl = window.location.href; let pathName = new URL(pageUrl).pathname; if (screenWidth < 1020) { $mo_HeadID.addClass('down'); $mo_HeadID.next().css('margin-top', mo_HeadHei); $('.header--26').css('--top', mo_HeadHei + 'px'); $('.menuBreak').click(function(){ $('.header--26').toggleClass('menuMo'); }); } else { $mo_HeadID.removeClass('down'); $mo_HeadID.next().removeAttr('style'); // 判断二级导航是否超出屏幕 $('.p_level2Box').each(function () { var $this = $(this); var ulWidth = $this.outerWidth(); var ofl = $this.offset().left; if (screenWidth - ofl - ulWidth <= 50) { $this.parent().addClass('ulHaveR'); $this.addClass('ulRight'); } }); // 初始化线条 $('#c_navigation_215-1697160577951 .p_level1Item').each(function () { let line = $('.line'); let width = $(this).outerWidth(); let left = $(this).offset().left; let link = $(this).children('p').find('a').attr('href'); if (link == pathName) { gsap.set(line, { width: width, x: left, }); initLine.width = width; initLine.x = left; } }); // 鼠标经过一级线条跟随 $('#c_navigation_215-1697160577951 .p_level1Item').mouseenter(function () { let line = $('.line'); let width = $(this).outerWidth(); let left = $(this).offset().left; gsap.to(line, { width: width, x: left, }); }); // 鼠标移除线条恢复 $('#c_navigation_215-1697160577951 .p_level1Item').mouseleave(function () { let line = $('.line'); gsap.to(line, { width: initLine.width, x: initLine.x, }); }); // 下滑样式 $(window).scroll(function () { const headID = $('.header--26').closest('[id*="c_"]'); if ($(this).scrollTop() > 50) { headID.addClass('down'); } else { headID.removeClass('down'); } }); // 面包导航 $('.menuBreak').click(function () { let ismenuRBreak = $('.menuRBreak').length; let inTime = 25; let header = $('.header--26 .p_navContent').html(); let language = $('.language ul').get(0).outerHTML; let follow = $('.follow').get(0).outerHTML; let bottomLeftTitle = $('.bottomLeftTit').get(0).outerHTML; let rightBootmT = $('.rightBootmT').get(0).outerHTML; if (!ismenuRBreak) { $(this).closest('.main').append(`

${follow}${bottomLeftTitle}

${language}${header}

${rightBootmT}

`); dongzuo(inTime); } else { dongzuo(inTime) } }) } } widthRest(); $(window).resize(widthRest); function dongzuo(inTime) { // 打开面包 setTimeout(function () { $('.menuRBreak').addClass('in'); }, inTime) // 关闭面包 $('.closeMenu svg').click(function () { $(this).closest('.menuRBreak').removeClass('in'); gsap.to('.bottomLeftTit p:nth-child(1)', { opacity: 0, y: 60 }); gsap.to('.bottomLeftTit p:nth-child(2)', { opacity: 0, y: 60 }); gsap.to('.bottomLeftTit p:nth-child(3)', { opacity: 0, y: 60 }); gsap.to('.bottomLeftTit p:nth-child(4)', { opacity: 0, y: 60 }); gsap.to('.bg__1', { opacity: 0, y: 60 }); gsap.to('.m_Right .p_level1Item', { opacity: 0, y: 60 }); gsap.to('.menuRBreak .m_Right > ul:first-child', { opacity: 0, duration: 0.8 }); gsap.to('.follow p:nth-child(1)', { opacity: 0, y: 60 }); gsap.to('.follow p:nth-child(2)', { opacity: 0, y: 60 }); gsap.to('.follow p:nth-child(3)', { opacity: 0, y: 60 }); gsap.to('.follow ul', { opacity: 0, y: 60 }); }); setTimeout(function () { var timeline = gsap.timeline(); var timebeforeTime = '<38%'; var ge = 0.2; timeline.to('.bottomLeftTit p:nth-child(1)', { opacity: 1, y: 0 }, timebeforeTime) .to('.bottomLeftTit p:nth-child(2)', { opacity: 1, y: 0 }, timebeforeTime) .to('.bottomLeftTit p:nth-child(3)', { opacity: 1, y: 0 }, timebeforeTime) .to('.bottomLeftTit p:nth-child(4)', { opacity: 1, y: 0 }, timebeforeTime) .to('.bg__1', { opacity: 0.3, y: 0 }, timebeforeTime) .to('.menuRBreak .m_Right > ul:first-child', { opacity: 1, duration: 0.8 }, timebeforeTime) .to('.follow p:nth-child(1)', { opacity: 1, y: 0 }, timebeforeTime) .to('.follow p:nth-child(2)', { opacity: 1, y: 0 }, timebeforeTime) .to('.follow p:nth-child(3)', { opacity: 1, y: 0 }, timebeforeTime) .to('.follow ul', { opacity: 1, y: 0 }, timebeforeTime); $('.m_Right .p_level1Item').each(function (index, element) { timeline.to(element, { opacity: 1, y: 0 }, ge * index); }); }, 900) } });