|
@@ -23,19 +23,19 @@ export default class Common {
|
23
|
23
|
} else {
|
24
|
24
|
this.headerMenu();
|
25
|
25
|
}
|
26
|
|
-
|
27
|
|
-
|
|
26
|
+
|
|
27
|
+
|
28
|
28
|
// let goTop = document.querySelector(".goTopBtn");
|
29
|
29
|
const scroll = new LocomotiveScroll();
|
30
|
30
|
// goTop.addEventListener("click", (e) => {
|
31
|
31
|
// console.log('click');
|
32
|
|
-
|
|
32
|
+
|
33
|
33
|
// scroll.scrollTo(0);
|
34
|
34
|
// console.log('click2');
|
35
|
35
|
// });
|
36
|
36
|
// window.requestUrl = 'https://www.foton.com.cn';
|
37
|
37
|
this.textAni();
|
38
|
|
-
|
|
38
|
+
|
39
|
39
|
// let btnDownTitle = document.querySelector(".btnDownTitle");
|
40
|
40
|
// let btnDownMenu = document.querySelector(".btnDown");
|
41
|
41
|
// btnDownTitle.addEventListener("click", (e) => {
|
|
@@ -52,85 +52,90 @@ export default class Common {
|
52
|
52
|
//锚点跳转
|
53
|
53
|
let url = new URL(window.location.href);
|
54
|
54
|
let anchor = url.hash.substring(1);
|
55
|
|
-
|
56
|
|
- console.log(anchor,88);
|
57
|
|
-
|
|
55
|
+
|
|
56
|
+ console.log(anchor, 88);
|
|
57
|
+
|
58
|
58
|
if (anchor) {
|
59
|
59
|
let element = document.getElementById(anchor);
|
60
|
|
- if(element)element.scrollIntoView({ behavior: 'smooth',block: 'start' });
|
|
60
|
+ if (element) element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
61
|
61
|
}
|
62
|
|
- if(window.location.href.indexOf("intoZz.html?") !== -1){
|
63
|
|
-
|
64
|
|
- }else{
|
|
62
|
+ if (window.location.href.indexOf("intoZz.html?") !== -1) {
|
|
63
|
+
|
|
64
|
+ } else {
|
65
|
65
|
new WOW().init();
|
66
|
66
|
}
|
67
|
|
- $('a').on("click",function(event) {
|
68
|
|
-
|
69
|
|
- let str=$(this).attr("href");
|
70
|
|
-
|
71
|
|
- if(str.indexOf("intoZz.html#") !== -1){
|
|
67
|
+ $('a').on("click", function (event) {
|
|
68
|
+
|
|
69
|
+ let str = $(this).attr("href");
|
|
70
|
+
|
|
71
|
+ if (str.indexOf("intoZz.html#") !== -1) {
|
72
|
72
|
event.preventDefault();
|
73
|
73
|
let hashIndex = str.indexOf('#');
|
74
|
74
|
let beforeHash = str.substring(0, hashIndex); // 获取 # 前面的部分
|
75
|
75
|
let afterHash = str.substring(hashIndex + 1);
|
76
|
76
|
let newStr = beforeHash + '?jumpz=' + afterHash;
|
77
|
|
- window.location.href = ''+newStr;
|
|
77
|
+ window.location.href = '' + newStr;
|
78
|
78
|
}
|
79
|
|
-
|
|
79
|
+
|
80
|
80
|
// let element = document.getElementById(targetId);
|
81
|
81
|
// if (element) {
|
82
|
82
|
// element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
83
|
83
|
// }
|
84
|
84
|
});
|
85
|
|
-
|
86
|
|
- // 微信二维码
|
87
|
|
- let wx=document.querySelector(".footerIcon .weixin");
|
88
|
|
- wx.addEventListener("click", (e) => {
|
89
|
|
- if(wx.classList.contains("wxShow")){
|
90
|
|
- wx.classList.remove("wxShow");
|
91
|
|
- }else{
|
92
|
|
- wx.classList.add("wxShow");
|
93
|
|
- }
|
94
|
|
- });
|
95
|
|
- document.onclick = function(e) {
|
|
85
|
+
|
|
86
|
+ let wx = document.querySelector(".footerIcon .weixin");
|
|
87
|
+ try {
|
|
88
|
+ // 微信二维码
|
|
89
|
+ wx.addEventListener("click", (e) => {
|
|
90
|
+ if (wx.classList.contains("wxShow")) {
|
|
91
|
+ wx.classList.remove("wxShow");
|
|
92
|
+ } else {
|
|
93
|
+ wx.classList.add("wxShow");
|
|
94
|
+ }
|
|
95
|
+ });
|
|
96
|
+ } catch (error) {
|
|
97
|
+ console.log(error)
|
|
98
|
+ }
|
|
99
|
+
|
|
100
|
+ document.onclick = function (e) {
|
96
|
101
|
if (wx && !wx.contains(e.target)) {
|
97
|
102
|
wx.classList.remove("wxShow");
|
98
|
103
|
}
|
99
|
104
|
};
|
100
|
105
|
}
|
101
|
|
- textAni(){
|
|
106
|
+ textAni() {
|
102
|
107
|
let mod = this.isMobile;
|
103
|
|
- let texts=document.querySelectorAll(".aniTxtUp");
|
104
|
|
- texts.forEach(text=>{
|
105
|
|
- let txt=text.innerText;
|
106
|
|
- let txtDiv=txt.split(' ');
|
107
|
|
- text.innerHTML='';
|
108
|
|
- let textNow='';
|
109
|
|
- let delTime=0;
|
110
|
|
-
|
111
|
|
- txtDiv.forEach(itemTxt=>{
|
112
|
|
- if(mod){
|
113
|
|
- textNow+=`<div class="wow wordInUp" data-wow-delay="`+delTime.toFixed(2)+`s">${itemTxt}</div> `;
|
114
|
|
- delTime+=0.1;
|
115
|
|
- }else{
|
116
|
|
- textNow+=`<div>`;
|
117
|
|
- let txtArr=itemTxt.split('');
|
118
|
|
- txtArr.forEach(item=>{
|
|
108
|
+ let texts = document.querySelectorAll(".aniTxtUp");
|
|
109
|
+ texts.forEach(text => {
|
|
110
|
+ let txt = text.innerText;
|
|
111
|
+ let txtDiv = txt.split(' ');
|
|
112
|
+ text.innerHTML = '';
|
|
113
|
+ let textNow = '';
|
|
114
|
+ let delTime = 0;
|
|
115
|
+
|
|
116
|
+ txtDiv.forEach(itemTxt => {
|
|
117
|
+ if (mod) {
|
|
118
|
+ textNow += `<div class="wow wordInUp" data-wow-delay="` + delTime.toFixed(2) + `s">${itemTxt}</div> `;
|
|
119
|
+ delTime += 0.1;
|
|
120
|
+ } else {
|
|
121
|
+ textNow += `<div>`;
|
|
122
|
+ let txtArr = itemTxt.split('');
|
|
123
|
+ txtArr.forEach(item => {
|
119
|
124
|
// if(item===' '){
|
120
|
125
|
// item=' ';
|
121
|
126
|
// }
|
122
|
|
- textNow+=`<span class="wow wordInUp" data-wow-delay="`+delTime.toFixed(2)+`s">${item}</span>`;
|
123
|
|
- delTime+=0.02;
|
|
127
|
+ textNow += `<span class="wow wordInUp" data-wow-delay="` + delTime.toFixed(2) + `s">${item}</span>`;
|
|
128
|
+ delTime += 0.02;
|
124
|
129
|
})
|
125
|
|
- textNow+=`</div> `
|
|
130
|
+ textNow += `</div> `
|
126
|
131
|
}
|
127
|
|
-
|
128
|
|
-
|
|
132
|
+
|
|
133
|
+
|
129
|
134
|
})
|
130
|
|
- text.innerHTML=textNow;
|
131
|
|
-
|
132
|
|
-
|
133
|
|
-
|
|
135
|
+ text.innerHTML = textNow;
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
134
|
139
|
})
|
135
|
140
|
}
|
136
|
141
|
//pc头部菜单
|
|
@@ -141,11 +146,11 @@ export default class Common {
|
141
|
146
|
|
142
|
147
|
let logo = document.querySelector(".headerPC .logo");
|
143
|
148
|
logo.addEventListener("click", (e) => {
|
144
|
|
- window.location.href ="./index.html"
|
|
149
|
+ window.location.href = "./index.html"
|
145
|
150
|
});
|
146
|
|
-
|
|
151
|
+
|
147
|
152
|
//设置一级菜单高亮
|
148
|
|
- let curNavId=this.curNavId;
|
|
153
|
+ let curNavId = this.curNavId;
|
149
|
154
|
navItems.forEach((item, index) => {
|
150
|
155
|
item.dataset.id = index;
|
151
|
156
|
if (curNavId == index) {
|
|
@@ -154,62 +159,64 @@ export default class Common {
|
154
|
159
|
});
|
155
|
160
|
|
156
|
161
|
// 为每个元素添加 mouseenter 事件监听器
|
157
|
|
- menuItems.forEach(function(item) {
|
|
162
|
+ menuItems.forEach(function (item) {
|
158
|
163
|
try {
|
159
|
164
|
item.addEventListener("mouseenter", (e) => {
|
160
|
165
|
let targetDom = item.querySelector(".menuSon");
|
161
|
166
|
if (targetDom?.classList?.contains("open")) {
|
162
|
167
|
console.log("元素有 open 类");
|
163
|
168
|
} else {
|
164
|
|
- if(targetDom){targetDom.classList.add("open");
|
165
|
|
- gsap.fromTo(targetDom, { yPercent: -10,opacity:0}, { yPercent: 0,opacity:1});}
|
|
169
|
+ if (targetDom) {
|
|
170
|
+ targetDom.classList.add("open");
|
|
171
|
+ gsap.fromTo(targetDom, { yPercent: -10, opacity: 0 }, { yPercent: 0, opacity: 1 });
|
|
172
|
+ }
|
166
|
173
|
}
|
167
|
174
|
});
|
168
|
|
-
|
169
|
|
- item.addEventListener("mouseleave", (e) => {
|
170
|
|
- let targetDom = item.querySelector(".menuSon");
|
|
175
|
+
|
|
176
|
+ item.addEventListener("mouseleave", (e) => {
|
|
177
|
+ let targetDom = item.querySelector(".menuSon");
|
171
|
178
|
if (targetDom?.classList?.contains("open")) {
|
172
|
179
|
gsap.to(targetDom, {
|
173
|
|
- yPercent: -10,opacity:0,
|
|
180
|
+ yPercent: -10, opacity: 0,
|
174
|
181
|
onComplete: () => {
|
175
|
182
|
targetDom.classList.remove("open");
|
176
|
183
|
}
|
177
|
184
|
})
|
178
|
|
- }
|
179
|
|
-
|
|
185
|
+ }
|
|
186
|
+
|
180
|
187
|
});
|
181
|
|
- } catch (error) {}
|
|
188
|
+ } catch (error) { }
|
182
|
189
|
});
|
183
|
190
|
//向下滚动隐藏菜单,向上滚动显示菜单
|
184
|
191
|
// 获取滚动条位置并更新显示
|
185
|
|
- let scrollyOld=0;
|
|
192
|
+ let scrollyOld = 0;
|
186
|
193
|
let headerDom = document.querySelector("header");
|
187
|
194
|
let careersType = document.querySelector(".careersType .titleBg");
|
188
|
|
- let isMobile=this.isMobile;
|
|
195
|
+ let isMobile = this.isMobile;
|
189
|
196
|
function updateScrollChange() {
|
190
|
197
|
try {
|
191
|
|
-
|
|
198
|
+
|
192
|
199
|
let scrollY = window.scrollY;
|
193
|
|
- if(scrollyOld<scrollY&&!headerDom.classList.contains("hideHeader")){
|
|
200
|
+ if (scrollyOld < scrollY && !headerDom.classList.contains("hideHeader")) {
|
194
|
201
|
headerDom.classList.add("hideHeader");
|
195
|
202
|
careersType.classList.remove("topType");
|
196
|
|
- }else if(scrollyOld>scrollY&&headerDom.classList.contains("hideHeader")){
|
|
203
|
+ } else if (scrollyOld > scrollY && headerDom.classList.contains("hideHeader")) {
|
197
|
204
|
headerDom.classList.remove("hideHeader");
|
198
|
|
- if(careersType&&!isMobile){
|
|
205
|
+ if (careersType && !isMobile) {
|
199
|
206
|
careersType.classList.add("topType");
|
200
|
207
|
}
|
201
|
208
|
}
|
202
|
|
- scrollyOld=scrollY;
|
203
|
|
- } catch (error) {}
|
|
209
|
+ scrollyOld = scrollY;
|
|
210
|
+ } catch (error) { }
|
204
|
211
|
}
|
205
|
|
-
|
206
|
|
-
|
207
|
|
- // 添加滚动事件监听器
|
208
|
|
- window.addEventListener('scroll', updateScrollChange);
|
209
|
|
-
|
210
|
|
-
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+ // 添加滚动事件监听器
|
|
215
|
+ window.addEventListener('scroll', updateScrollChange);
|
|
216
|
+
|
|
217
|
+
|
211
|
218
|
}
|
212
|
|
-
|
|
219
|
+
|
213
|
220
|
//移动端头部
|
214
|
221
|
initHeaderM() {
|
215
|
222
|
let navFlagBtn = document.querySelector(".headerMobile .navFlagBtn");
|
|
@@ -217,19 +224,19 @@ export default class Common {
|
217
|
224
|
let navMenus = document.querySelectorAll(".headerMobile .navMenu>div");
|
218
|
225
|
let logo = document.querySelector(".headerMobile .logo");
|
219
|
226
|
logo.addEventListener("click", (e) => {
|
220
|
|
- window.location.href ="/index.html"
|
|
227
|
+ window.location.href = "/index.html"
|
221
|
228
|
});
|
222
|
|
- navMenus.forEach(function(item) {
|
|
229
|
+ navMenus.forEach(function (item) {
|
223
|
230
|
item.addEventListener("click", (e) => {
|
224
|
|
- if(item.classList.contains("menuShow")){
|
|
231
|
+ if (item.classList.contains("menuShow")) {
|
225
|
232
|
item.classList.remove("menuShow");
|
226
|
|
- }else{
|
|
233
|
+ } else {
|
227
|
234
|
item.classList.add("menuShow");
|
228
|
235
|
}
|
229
|
236
|
});
|
230
|
237
|
})
|
231
|
|
-
|
232
|
|
-
|
|
238
|
+
|
|
239
|
+
|
233
|
240
|
//0-关闭状态、1-为打开状态
|
234
|
241
|
navFlagBtn.addEventListener("click", (e) => {
|
235
|
242
|
let flag = parseInt(navFlagBtn.dataset.flag) || 0;
|
|
@@ -246,7 +253,7 @@ export default class Common {
|
246
|
253
|
.classList.add("arrowDirectionCenter");
|
247
|
254
|
navFlag.classList.add("FlagOpen");
|
248
|
255
|
navFlagBtn.classList.add("btnOpen");
|
249
|
|
- gsap.fromTo(navFlag, { xPercent: 100,opacity:0}, { xPercent: 0,opacity:1});
|
|
256
|
+ gsap.fromTo(navFlag, { xPercent: 100, opacity: 0 }, { xPercent: 0, opacity: 1 });
|
250
|
257
|
} else {
|
251
|
258
|
navFlagBtn.dataset.flag = 0;
|
252
|
259
|
navFlagBtn
|
|
@@ -259,34 +266,34 @@ export default class Common {
|
259
|
266
|
.querySelector(".lineCenter")
|
260
|
267
|
.classList.remove("arrowDirectionCenter");
|
261
|
268
|
gsap.to(navFlag, {
|
262
|
|
- xPercent: 100,opacity:0,
|
263
|
|
- onComplete: () => {
|
264
|
|
- navFlag.classList.remove("FlagOpen");
|
265
|
|
- }
|
266
|
|
- });
|
267
|
|
- navFlagBtn.classList.remove("btnOpen");
|
268
|
|
- navMenus.forEach(function(item) {
|
269
|
|
- item.classList.remove("menuShow");
|
270
|
|
- })
|
|
269
|
+ xPercent: 100, opacity: 0,
|
|
270
|
+ onComplete: () => {
|
|
271
|
+ navFlag.classList.remove("FlagOpen");
|
|
272
|
+ }
|
|
273
|
+ });
|
|
274
|
+ navFlagBtn.classList.remove("btnOpen");
|
|
275
|
+ navMenus.forEach(function (item) {
|
|
276
|
+ item.classList.remove("menuShow");
|
|
277
|
+ })
|
271
|
278
|
}
|
272
|
279
|
});
|
273
|
280
|
}
|
274
|
281
|
|
275
|
|
- initFooterM(){
|
|
282
|
+ initFooterM() {
|
276
|
283
|
let menuItems = document.querySelectorAll(".footerClick");
|
277
|
|
- menuItems.forEach(function(item) {
|
278
|
|
- let targetDom = item.querySelector(".h7");
|
279
|
|
- targetDom.setAttribute("href", "javascript:void(0)");
|
280
|
|
- item.addEventListener("click", (e) => {
|
281
|
|
- if (item?.classList?.contains("ckShow")) {
|
282
|
|
- item.classList.remove("ckShow");
|
283
|
|
- } else {
|
284
|
|
- item.classList.add("ckShow");
|
285
|
|
- }
|
286
|
|
- });
|
|
284
|
+ menuItems.forEach(function (item) {
|
|
285
|
+ let targetDom = item.querySelector(".h7");
|
|
286
|
+ targetDom.setAttribute("href", "javascript:void(0)");
|
|
287
|
+ item.addEventListener("click", (e) => {
|
|
288
|
+ if (item?.classList?.contains("ckShow")) {
|
|
289
|
+ item.classList.remove("ckShow");
|
|
290
|
+ } else {
|
|
291
|
+ item.classList.add("ckShow");
|
|
292
|
+ }
|
|
293
|
+ });
|
287
|
294
|
});
|
288
|
|
-
|
289
|
|
-
|
|
295
|
+
|
|
296
|
+
|
290
|
297
|
}
|
291
|
|
-
|
|
298
|
+
|
292
|
299
|
}
|