https://wd.leiting.com/static/client/pc/202207/home/js/index.js?v=20260727

1$(function() {
2    window.ltAnalytics.init('wd')
3    page.init()
4    modal.init()
5    // modal.open('.picture-modal')
6})
7
8// 页面初始化
9var page = {
10    setOssData() {
11        if(typeof(ossData) !== 'undefined') {
12            if($('#payBall a').attr('href') == 'javascript:;') {
13                $('#payBall a').attr('href', ossData.payBall.href);
14            }
15        }
16    },
17    addActive(el) {
18        // 为元素添加active类，并移除siblings的active
19        el.addClass('active').siblings().removeClass('active')
20    },
21    init() {
22        this.setOssData()
23        page1.init()
24        page2.init()
25        page3.init()
26        page4.init()
27        page5.init()
28        page6.init()
29    }
30}
31
32// 首页
33var page1 = {
34    init() {
35        // 悬浮球
36        $('#payBall a').on('click', function() {
37            leitingweb.track('click_official_topup',{
38                Game: 'wd',
39                Acts: 'home'
40            })
41        })
42        // kv
43        if($('.page1 .kv-more .kv-swiper').find('.swiper-slide').length > 0) {
44            this.kvSwiper = new Swiper('.kv-swiper', {
45                loop: $('.kv-swiper').find('.swiper-slide').length > 1,
46                watchOverflow: true,
47                spaceBetween: 2,
48                autoplay: {
49                    delay: 5000,
50                    stopOnLastSlide: false,
51                    disableOnInteraction: false,
52                }
53            })
54        }
55        // 背景视频
56        var userAgentInfo = navigator.userAgent.toLowerCase();
57        var isMobile = userAgentInfo.match(/(iphone|ipod|android|ios|ipad|backerry|webos|symbian|windows phone|phone|mobile|webos|incognito|webmate|bada|nokia|lg|ucweb|skyfire)/i);
58        var fixIpad = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1; // 兼容：iPad-设置-Safar浏览器-请求桌面网站-所有网站（开启）
59        if(isMobile || fixIpad) {
60            $('.page1 .kv-one .kv-video').remove();
61        }
62
63        var showRight = $('.page2').offset().top - $(window).height() / 2
64        $(window).scroll(function() {
65            dealRight()
66        });
67        function dealRight() {
68            var o = $(window).scrollTop();
69            if(o >= showRight) {
70                $('.side-bar').removeClass('opacity0')
71            } else {
72                $('.side-bar').addClass('opacity0')
73            }
74        }
75        dealRight()
76    }
77}
78
79// 新闻页
80var page2 = {
81    init() {
82        var _this = this
83        // 卖点图
84        if($('.news-swiper').find('.swiper-slide').length > 0) {
85            this.page3Swiper = new Swiper('.news-swiper', {
86                loop: $('.news-swiper').find('.swiper-slide').length > 1,
87                watchOverflow: true,
88                spaceBetween: 2,
89                autoplay: {
90                    delay: 3000,
91                    stopOnLastSlide: false,
92                    disableOnInteraction: false,
93                },
94                pagination: {
95                    el: '.news-swiper-pagination',
96                    clickable: true
97                }
98            })
99            $('.news-swiper-wrap .swiper-pagination').on('mouseenter', '.swiper-pagination-bullet', function() {
100                _this.page3Swiper.slideTo($(this).index() + 1)
101            })
102        }
103
104        // 类型切换
105        $('#p2TypeList').on('click', '.item', function() {
106            if($(this).hasClass('active')) return
107            var type = $(this).attr('data')
108            page.addActive($(this))
109            page.addActive($("#p2NewsList .news-list[data='" + type + "']"))
110        })
111    }
112}
113
114// 专区入口
115var page3 = {
116    init() {
117        // 类型切换
118        $('#p3TypeList').on('click', '.item', function() {
119            if($(this).hasClass('active')) return
120            var type = $(this).attr('data')
121            page.addActive($(this))
122            page.addActive($("#p3ConList .project-list[data='" + type + "']"))
123        })
124
125        // 链接跳转
126        $('#p3ConList').on('click', '.jump', function() {
127            var url = $(this).attr('data')
128            if(url === '' || url === undefined) {
129                alert('敬请期待！')
130            } else {
131                window.open(url)
132            }
133        })
134    }
135}
136
137// 问道图鉴
138var page4 = {
139    role: {
140        attrIndex: 1,
141        genderIndex: 1
142    },
143    roleEvent() {
144        /* 经典职业 */
145        var _this = this
146
147        // 属性切换
148        $('#p4RoleAttrList').on('click', '.item', function() {
149            if($(this).hasClass('active')) return
150            page.addActive($(this))
151            _this.updateRoleData()
152        })
153
154        // 性别切换
155        $('#p4RoleGenderList').on('click', '.item', function() {
156            if($(this).hasClass('active')) return
157            page.addActive($(this))
158            _this.updateRoleData()
159        })
160
161        // 介绍内容切换
162        $('#p4RoleDetailList').on('mouseenter', '.type-list .item', function() {
163            if($(this).hasClass('active')) return
164            page.addActive($(this))
165            var index = $(this).index()
166            page.addActive($(this).closest('.detail-item').find('.detail-list').children().eq(index))
167        })
168
169        // 介绍内容切换分页切换
170        $('#p4RoleDetailList').on('mouseenter', '.detail-list .circle span', function() {
171            if($(this).hasClass('active')) return
172            page.addActive($(this))
173            var index = $(this).index()
174            page.addActive($(this).closest('.sub-page').children('.text').eq(index))
175        })
176    },
177    updateRoleData() {
178        // 更新角色信息
179        this.role.attrIndex = $('#p4RoleAttrList .item.active').attr('data')
180        this.role.genderIndex = $('#p4RoleGenderList .item.active').attr('data')
181        page.addActive($("#p4RoleImgList .img[data='" + this.role.attrIndex + this.role.genderIndex + "']"))
182        page.addActive($("#p4RoleBg .video-wrap[data='" + this.role.attrIndex + "']"))
183        page.addActive($("#p4RoleDetailList .detail-item[data='" + this.role.attrIndex + "']"))
184    },
185    pet: {
186        init: false,
187        swiper: '',
188        scrollX: 0, // 位移距离
189        timer: '', // 滚动计时器
190        wrapW: 0, // 容器宽度
191        pauseArea: 16 // 中间停止区域所占百分比
192    },
193    petScrollTimer(type, percent) {
194        // 滚动定时器
195        if(this.pet.timer !== '') {
196            clearInterval(this.pet.timer)
197            console.log('清除定时器')
198        }
199        this.pet.scrollX = this.pet.swiper.translate
200        var _this = this
201        console.log(this.pet.scrollX + $('.pet-swiper').width())
202        this.pet.timer = setInterval(function() {
203            if(type === 'left') {
204                _this.pet.scrollX++
205                if(_this.pet.scrollX >= 0) {
206                    _this.pet.scrollX = -1 * (_this.pet.swiper.slides.length / 3 * $('.pet-swiper .swiper-slide').width())
207                }
208                _this.pet.swiper.setTranslate(_this.pet.scrollX)
209            } else if(type === 'right') {
210                _this.pet.scrollX--
211                if(_this.pet.scrollX <= (-2 * (_this.pet.swiper.slides.length / 3 * $('.pet-swiper .swiper-slide').width()))) {
212                    _this.pet.scrollX = -1 * (_this.pet.swiper.slides.length / 3 * $('.pet-swiper .swiper-slide').width())
213                }
214                _this.pet.swiper.setTranslate(_this.pet.scrollX)
215            }
216        }, 2 * (5 - Math.abs(5 - (percent / 10)))) // 越靠近边缘移动越快
217    },
218    petEvent() {
219        /* 经典宠物 */
220        var _this = this
221        this.pet.swiper = new Swiper('.pet-swiper', {
222            loop: $('.pet-swiper').find('.swiper-slide').length > 5,
223            watchOverflow: true,
224            slidesPerView: 'auto',
225            touchRatio: 0
226        })
227        if($('.pet-swiper .swiper-slide').length > 5) {
228            $('.pet-swiper-wrap').on('mouseover', function(e) {
229                var wrapW = $('.pet-swiper').width()
230                var percent = parseInt(e.clientX / wrapW * 100)
231                console.log(percent)
232                if(percent >= 0 && percent < (50 - _this.pet.pauseArea / 2)) {
233                    // 左侧区域
234                    _this.petScrollTimer('left', percent)
235                } else if(percent > (50 + _this.pet.pauseArea / 2) && percent <= 100) {
236                    // 右侧区域
237                    _this.petScrollTimer('right', percent)
238                } else {
239                    _this.petScrollTimer()
240                }
241            })
242            $('.pet-swiper-wrap').on('mouseout', function() {
243                _this.petScrollTimer()
244            })
245        }
246    },
247    clothEvent() {
248        /* 经典时装 */
249        // 时装切换
250        $('#p4ClothTypeList').on('mouseenter', '.item', function() {
251            if($(this).hasClass('active')) return
252            page.addActive($(this))
253            var index = $(this).index()
254            page.addActive($('#p4ClothDetailList .item').eq(index))
255            page.addActive($('#p4ClothImg .item').eq(index))
256        })
257    },
258    init() {
259        // 类型切换
260        var _this = this
261        $('#p4TypeList').on('click', '.item', function() {
262            if($(this).hasClass('active')) return
263            var type = $(this).attr('data')
264            page.addActive($(this))
265            page.addActive($("#p4ConList .con-item[data='" + type + "']"))
266            if(type === 'type2' && !_this.pet.init) {
267                _this.pet.init = true
268                _this.petEvent()
269            }
270        })
271
272        this.roleEvent()
273        this.clothEvent()
274    }
275}
276
277// 攻略中心
278var page5 = {
279    accordion: '', // 手风琴对象
280    init() {
281        this.accordion = new cwAccordion()
282        this.accordion.init($('#page5Accordion1'))
283    }
284}
285
286// 影音同人
287var page6 = {
288    init() {
289        // 类型切换
290        $('#p6TypeList').on('click', '.item', function() {
291            if($(this).hasClass('active')) return
292            var type = $(this).attr('data')
293            page.addActive($(this))
294            page.addActive($("#p6MediaWrap .list[data='" + type + "']"))
295            if(type === 'img') {
296                $('#p6ComNav .btn-more').removeClass('active')
297                $('#p6MoreBtn1').addClass('active')
298            } else if(type === 'video') {
299                $('#p6ComNav .btn-more').removeClass('active')
300                $('#p6MoreBtn2').addClass('active')
301            }
302        })
303
304        // 华丽美图
305        $('#p6PictureList').on('click', '.item', function() {
306            var src = $(this).attr('data-src')
307            var alt = $(this).attr('data-alt')
308            $('#p6PmImg').attr({'src': src, 'alt': alt})
309            modal.open('.p6-picture-modal')
310        })
311
312        // 精美视频
313        $('#p6VideoList').on('click', '.item', function() {
314            var src = $(this).attr('data')
315            $('#p6VmVideo').attr('src', src)
316            modal.openWithVideo('.p6-video-modal', 'p6VmVideo', src)
317        })
318    }
319}
320
321/* 手风琴组件 */
322var cwAccordion = function() {
323    return {
324        wrapper: "",
325        introW: 0,
326        detailW: 0,
327        init: function(wrap) {
328            this.wrapper = wrap;
329            this.introW = parseInt(this.wrapper.attr("data-intro-w"));
330            this.detailW = parseInt(this.wrapper.attr("data-detail-w"));
331            var that = this;
332
333            that.wrapper.on("mouseenter", ".accordion-item", function() {
334                if ($(this).hasClass("active")) {
335                    return;
336                }
337                $(this).addClass('active').siblings().removeClass('active');
338                var item = that.wrapper.children();
339                var active = $(this).index();
340                for (var i = 0, len = item.length; i < len; i++) {
341                    if (i > active) {
342                        item.eq(i).css("transform","translate3d(" +(that.introW * i + that.detailW)/100 + "rem,0," + i + "rem)");
343                    }
344                    if (i <= active) {
345                        item.eq(i).css("transform", "translate3d(" + that.introW * i/100 + "rem,0," + i + "rem)");
346                    }
347                }
348            });
349        }
350    }
351}
352
353/*模态框相关*/
354var modal = {
355    preModal: '',       // 当前\上一个开启的模态框的类名
356    scrollWidth: '',    // 浏览器滚动条宽度
357    scrollTop: 0,       // 开启模态框时页面滚动距离
358    needCloseModal: '', // 需要关闭的模态框类名
359    closeIng: false,    // 是否正在关闭模态框
360    delayTime: 300,     // 模态框关闭所需时间
361    preVideo: '',       // 保存'video-data'中需要自动播放的video的Id
362    focusEl: '',        // 开启模态框前获取到焦点的元素
363    opening: false,     // 当前是否有开启的模态框
364    scrollThrough: false,// 是否阻止滚动穿透
365    open: function(className) {
366        var that = this;
367        
368        // 若当前有开启的模态框，则关闭当前模态框后再开启需要开启的模态框
369        if(that.opening) {
370            that.hide(that.preModal);
371            setTimeout(function() {
372                that.open(className);
373            }, that.delayTime);
374            return;
375        }
376        that.opening = true;
377        
378        var openDalyTime = 0;
379        if (that.closeIng) {
380            openDalyTime = that.delayTime;
381        }
382        setTimeout(function() {
383            that.preModal = className;
384            that.focusEl = document.activeElement;
385            that.scrollWidth = window.innerWidth - document.body.clientWidth;
386            that.scrollTop = parseInt(that.getScrollTop());
387            
388            $('body').css('padding-right', that.scrollWidth + 'px');
389            if(that.scrollThrough) {
390                document.body.style.top = -that.scrollTop + 'px';
391                $('body').addClass('modal-open');
392            } else {
393                $('body').addClass('modal-open-scroll-through');
394            }
395            
396            $(that.preModal).css('display', 'flex').addClass('modal-active');
397            $(that.needCloseModal).removeClass('modal-hide');
398            
399            /* 开启模态框后为当前模态框的关闭按钮获取焦点 */
400            $(className + " [data='close']").focus();
401        }, openDalyTime)
402    },
403    hide: function(className) {
404        var that = this;
405        that.needCloseModal = className;
406        that.closeIng = true;
407
408        $(that.needCloseModal).removeClass('modal-active').addClass('modal-hide');
409
410        setTimeout(function() {
411            $(that.focusEl).focus();
412            $(that.needCloseModal).css('display', 'none');
413            that.scrollTo(that.scrollTop);
414            
415            if(that.scrollThrough) {
416                $('body').removeClass('modal-open');
417            } else {
418                $('body').removeClass('modal-open-scroll-through');
419            }
420            
421            $(that.preModal).css('overflow', '');
422            $('body').css('padding-right', '');
423            that.closeIng = false;

424            that.opening = false;
425        }, that.delayTime);
426
427        /*if you need auto play video*/
428        if(document.getElementById(that.preVideo) != null) {
429            document.getElementById(that.preVideo).pause();
430        }
431    },
432    scrollTo: function(num){
433        document.body.scrollTop = document.documentElement.scrollTop = num;
434    },
435    getScrollTop: function(){
436        return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
437    },
438    openWithVideo(modal, videoId, videoSrc) {
439        // 开启带视频的弹窗
440        $('#' + videoId).attr('src', videoSrc)
441        this.preVideo = videoId
442        document.getElementById(this.preVideo).play()
443        this.open(modal)
444    },
445    init: function() {
446        var that = this;
447        $('.modal').css('display', 'none');
448        $('.modal-hide, .modal-hide .modal-wrapper').css('animation-duration', that.delayTime + 'ms');
449        // 点击关闭按钮或遮罩层关闭当前模态框
450        $("[data='close'], .modal:not([data-click-mask='false'])").on('click', function() {
451            that.hide(that.preModal);
452        });
453        // 阻止点击触发关闭模态框
454        $(".modal:not([data-click-mask='false']) .modal-wrapper").on('click', function(e) {
455            e.stopPropagation();
456        });
457        // 点击触发开启模态框
458        $("[data-type='modal']").on('click', function() {
459            var target = $(this).attr('data');
460
461            /*if you need auto play video*/
462            that.preVideo = $(this).attr('video-data');
463            if(that.preVideo != null) {
464                document.getElementById(that.preVideo).play();
465            }
466
467            that.open(target);
468        });
469    }
470}