ohplay_official/public/static/js/productMK.js

/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2017-07-14 10:48:36
 * @version $Id$
 */

$(document).ready(function () {
    var checkBrowser = function () {
        var browserType = TD.util.browserType();
        console.log(browserType);

        if (browserType !== 'Chrome' && browserType !=='Safari') {
            console.log('not webkit');
            $('.effect-layer').hide();
        }
    }

    var checkSize = function () {
        var clientWidth = document.documentElement.clientWidth || document.body.clientWidth

        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

        console.log(clientWidth, clientHeight);

        if (clientWidth / clientHeight < 16/9) {
            return 0;
        } else {
            return 1;
        }
    }
    var bgMode = checkSize();

    var langHandler = function () {
        if ($('.nav-lang-current').find('.nav-lang-item').text() === 'EN') {
            $('.scroll-text-title').each(function () {
                var newText = $(this).html().replace(/&nbsp;/g, ' ');
                newText = newText.replace(/<br>/g, ' ');
                $(this).html(newText);
            })

            $('.scroll-text-content').each(function () {
                var newText = $(this).html().replace(/&nbsp;/g, ' ');
                newText = newText.replace(/<br>/g, ' ');
                $(this).html(newText);
            })

            $('.scroll-text-subtitle').each(function () {
                var newText = $(this).html().replace(/&nbsp;/g, ' ');
                newText = newText.replace(/<br>/g, ' ');
                $(this).html(newText);
            })
        };
    }

    var initFullpage = function (ele) {
        $(ele).fullpage({
            // css3: true,
            easing: 'cubic-bezier(.62,.01,0,1)',
            easingcss3: 'cubic-bezier(.62,.01,0,1)',
            navigation: true,
            navigationPosition: 'right',
            scrollOverflow: true,
            afterRender: function () {
                // 首屏标题字体大小调整
                if ($('.nav-lang-current').find('.nav-lang-item').text() !== 'EN') {
                    if ($('.scroll-text-subtitle').text().replace(/[\s\d]/g, '').length > 10) {
                        if (document.documentElement.clientWidth <= 1080) {
                            $('.scroll-text-subtitle').css('fontSize', '0.36rem');
                        } else {
                            $('.scroll-text-subtitle').css('fontSize', '0.72rem');
                        }
                    }
                }

                if (document.documentElement.clientWidth > 1080) {
                    var scrollVideoEl = $('#scrollVideo');
                    bgMode = checkSize();
                    console.log(bgMode,'bgmode');
                    if (bgMode) {
                        scrollVideoEl.css('width', '100%');
                        scrollVideoEl.css('height', 'auto');
                    } else {
                        scrollVideoEl.css('height', '100%');
                        scrollVideoEl.css('width', 'auto');
                    }
                }

                // 移动端去除换行
                // if (document.documentElement.clientWidth <= 1080) {
                //     $('.scroll-text-content').each(function () {
                //         $(this).html($(this).html().replace(/<br>/g, ''));

                //         // 文字过少则居中
                //         if ($(this).text().replace(/[\s\d]/g, '').length < 25) {
                //             $(this).css('textAlign', 'center');
                //         }
                //     })
                // }


                $(window).resize();
            },
            onLeave: function (index, nextIndex, direction) {
                console.log(index, nextIndex, direction);
                var sectionNow = $(ele + '>:nth-child(' + index + ')').find('.scroll-inner');
                var sectionNext = $(ele + '>:nth-child(' + nextIndex + ')').find('.scroll-inner');
                
                if (bgMode) {
                    sectionNow.hasClass('ani-bgscale-x') && 
                    sectionNow.removeClass('ani-bgscale-x');

                    sectionNext.hasClass('ani-bgscale-x') || 
                    sectionNext.addClass('ani-bgscale-x');
                } else {
                    sectionNow.hasClass('ani-bgscale-y') && 
                    sectionNow.removeClass('ani-bgscale-y');

                    sectionNext.hasClass('ani-bgscale-y') || 
                    sectionNext.addClass('ani-bgscale-y');
                }

                if ($('.scroll-video').find('video').length === 0) return;

                if (nextIndex === 3) {
                    $('.scroll-video').find('video')[0].play();
                }
                if (index === 3) {
                    // $('.scroll-video').find('video')[0].currentTime = 0;
                    $('.scroll-video').find('video')[0].pause();
                    setTimeout(function () {
                        $('.scroll-video').find('video')[0].currentTime = 0;
                    }, 600);
                } 
            }
        });
    }

    var innerPageHandler = function () {
        var outerWrapEl = $('.outer-wrap');
        var innerWrapEl = $('.inner-wrap');

        innerWrapEl.hide();

        $('.btn-inner').on('click', function () {
            $.fn.fullpage.destroy('all');
            outerWrapEl.hide();
            innerWrapEl.show();
            initFullpage('.inner-wrap');
            $.fn.fullpage.moveTo(1);
        })

        $('.btn-outer').on('click', function () {
            $.fn.fullpage.destroy('all');
            innerWrapEl.hide();
            outerWrapEl.show();
            initFullpage('.outer-wrap');
            setTimeout(function () {
                $(window).resize();
            }, 0)
            $.fn.fullpage.moveTo(1);
        })
    }

    var videoLayerHandler = function () {
        var videoShort = document.getElementById('scrollVideo');
        var videoObj = document.getElementById('videoObj');

        // $('.video-tv>img').on('click', function () {
        //     if (videoObj.networkState !== 3) {
        //         $('.video-layer').show();
        //         videoObj.play();
        //     } else {
        //         console.log('视频不存在');
        //         alert('视频不存在');
        //     }
        // })

        $('.btn-videoplay').on('click', function () {
            console.log('videoplay');
            if (videoObj.networkState !== 3) {
                videoShort.pause();
                $.fn.fullpage.setAllowScrolling(false);

                $('.video-layer').show();
                videoObj.play();
            } else {
                console.log('视频不存在');
                alert('视频不存在');
            }
        })

        $('.video-layer').on('click', function (evt) {
            var evt = evt || window.event;
            var target = evt.target || evt.srcElement;

            if (target.nodeName.toLowerCase() === 'video') {
                if (videoObj.paused === true) {
                    videoObj.play();
                } else {
                    videoObj.pause();
                }
            } else {
                videoObj.pause();
                videoObj.currentTime = 0;
                $(this).hide();

                $.fn.fullpage.setAllowScrolling(true);
                videoShort.play();
            }
        })
    }

    var pageInit = function () {
        checkBrowser();
        langHandler();

        // 移动端移除视频部分
        if (document.documentElement.clientWidth <= 1080) {
            $('.scroll-video').remove();
        }

        // 判断背景图动画采用的bg-size形式
        $(window).on('resize', function () {
            bgMode = checkSize();
        })

        // 全屏滚动
        initFullpage('.outer-wrap');

        // 内胆页处理
        $('.inner-wrap').length && innerPageHandler();

        // 视频层处理
        $('.video-layer').length && videoLayerHandler();



        // 判断是否是缓存加载
        var isCache = false; 

        var cacheCheck = function () {
            var imgTest = new Image();
            imgTest.src = $('.img-preload').children(0).attr('src');
            if (imgTest.complete === true) {
                isCache = true;
            }
        }

        cacheCheck();

        TD.imgPreload(function () {
            $('.m-loading').fadeOut(300);
            setTimeout(function () {
                $(window).resize();
            }, 0);
        })

        // 字体预加载处理
        var fontOver = false; // 字体是否处理完毕

        var fontLoader = function () {
            if ($('.nav-lang-current').find('.nav-lang-item').text() === '繁体') {
                // $('.scroll-text-title').css('font-family', '"LiSong Pro", "MingLiU", "Microsoft YaHei"');
                // $('.scroll-text-title').css('font-weight', '800');
                // $('.scroll-text-subtitle').css('font-family', '"LiSong Pro", "MingLiU", "Microsoft YaHei"');
                // $('.scroll-text-subtitle').css('font-weight', '800');
                return;
            };

            if ($('.nav-lang-current').find('.nav-lang-item').text() === 'EN') {
                return;
            }

            $('.scroll-text-title').css('fontFamily', "'newFont', 'PingFang SC', 'STHeiti', 'Microsoft YaHei'");
            $('.scroll-text-subtitle').css('fontFamily', "'newFont', 'PingFang SC', 'STHeiti', 'Microsoft YaHei'");
            $('.scroll-text-title').css('fontWeight', 400);
            $('.scroll-text-subtitle').css('fontWeight', 400);
            fontOver = true;
        }

        window.onload = function () {
            isCache = false;
            
            fontOver || fontLoader();
        }
        window.onpageshow = function (evt) {
            console.log(evt.persisted)
            evt.persisted && fontOver || fontLoader();
        }
        setTimeout(function () {
            if (isCache) {
                fontOver || fontLoader();
            }
        }, 100);
    }

    pageInit();
});