cecf-website/js/header.js

$(document).ready(function () {

    // $("img").lazyload({
    //     effect: "fadeIn"
    // });

    var phone = document.body.clientWidth <= 750 ? true : false;;
    var header = document.getElementsByClassName('header')[0];
    // pc端处理
    //顶部导航控制
    function headerTop(a, b) {
        console.log(a.length, '一级菜单')
        if (phone) return;
        for (var i = 0; i < a.length; i++) {
            var time = null;
            //控制鼠标悬浮时样式
            a[i].onmouseover = function (i) {
                return function () {
                    if (time != null) clearTimeout(time);
                    time = setTimeout(function () {
                        for (var j = 0; j < a.length; j++) {
                            if (j == i) {
                                a[j].classList.add('active');
                                b[j].classList.add('active');
                                if (!phone) {
                                    b[j].classList.add('animation_downIn');
                                    b[j].classList.remove('animation_downOut');
                                }
                            } else {
                                a[j].classList.remove('active');
                                b[j].classList.remove('active');
                            }
                        }
                    }, 200)
                }
            }(i);
            //控制鼠标移除时样式
            a[i].onmouseout = function (i) {
                return function () {
                    if (time != null) clearTimeout(time);
                    time = setTimeout(function () {
                        a[i].classList.remove('active');
                        b[i].classList.remove('active');
                        b[i].classList.add('animation_downOut');
                        b[i].classList.remove('animation_downIn');
                    }, 200)
                }
            }(i);
        }
    }

    //pc 下层关闭控制
    function closeIcon() {
        var closeicon = document.getElementsByClassName('close_icon');
        for (var i = 0; i < closeicon.length; i++) {
            closeicon[i].onclick = function (i) {
                return function () {
                    const controlDom = closeicon[i].parentNode.parentNode || closeicon[i].parentElement.parentElement;
                    console.log(controlDom)
                    controlDom.classList.remove('active');
                }
            }(i)
        }
    }
    //下层导航一级样式控制，二级显示控制
    function headerBoxOne(a, b) {
        if (phone) return;
        for (var i = 0; i < a.length; i++) {

            //控制鼠标悬浮时样式
            a[i].onmouseover = function (i) {
                return function () {
                    for (var j = 0; j < a.length; j++) {
                        if (j == i) {
                            a[j].classList.add('active');
                            b[j].classList.add('active');
                        } else {
                            a[j].classList.remove('active');
                            b[j].classList.remove('active');
                        }
                    }
                }
            }(i);
        }
    }

    //二级样式控制，三级显示控制
    function headerBoxTwo(a, b) {
        if (phone) return;
        for (var i = 0; i < a.length; i++) {
            a[i].onmouseover = function (i) {
                return function () {
                    const sep = a[i].className.split(" ")[2];
                    for (var j = 0; j < a.length; j++) {
                        if (j == i) {
                            a[j].classList.add('active');
                            b[j].classList.add('active');
                        } else if (a[j].className.split(' ')[2] == sep) {
                            a[j].classList.remove('active');
                            b[j].classList.remove('active');
                        }
                    }
                }
            }(i)
        }
    }
    // header头部模块控制
    var headerLink = document.getElementsByClassName('header_link');
    var itemWraper = document.getElementsByClassName('item_wraper');
    var loopMenuWraper = document.getElementsByClassName('loop_menu_wraper');
    headerTop(headerLink, loopMenuWraper); //pc
    headerPhoneTop(itemWraper, loopMenuWraper); //phone

    // iconcontrol(); //phone左侧按钮控制
    closeIcon();
    //解决方案
    const listItemSoultion = document.getElementsByClassName('list_item_Soultion');
    const middleLoopMenu = document.getElementsByClassName('middle_loop_menu_Soultion');
    headerBoxOne(listItemSoultion, middleLoopMenu); //pc
    headerBoxPhoneOne(listItemSoultion, middleLoopMenu); //phone
    var listItemSol = document.getElementsByClassName('list_item_Solution_Three');
    var rightLoopMenuSolution = document.getElementsByClassName('right_loopMenu_Solution');
    headerBoxTwo(listItemSol, rightLoopMenuSolution); //pc
    headerBoxPhoneOne(listItemSol, rightLoopMenuSolution); //phone

    //产品中心
    const listItemProduct = document.getElementsByClassName('list_item_Product');
    const middleLoopMenuPro = document.getElementsByClassName('middle_loop_menu_Product');
    headerBoxOne(listItemProduct, middleLoopMenuPro); //pc
    headerBoxPhoneOne(listItemProduct, middleLoopMenuPro); //Phone
    const listItemPro = document.getElementsByClassName('list_item_Pro');
    const rightLoopMenuPro = document.getElementsByClassName('right_loopMenu_Pro');
    headerBoxTwo(listItemPro, rightLoopMenuPro); //pc
    headerBoxPhoneOne(listItemPro, rightLoopMenuPro); //phone


    //关于我们
    const listItemUs = document.getElementsByClassName('list_item_us');
    const rightLoopMenUs = document.getElementsByClassName('right_loopMenu_us');
    headerBoxOne(listItemUs, rightLoopMenUs);
    headerBoxPhoneOne(listItemUs, rightLoopMenUs); //Phone

    window.addEventListener('scroll', function () {
        if (phone) return;
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        if (scrollTop === 0) {
            header.className = 'header';
        } else {
            header.className = 'header active';
        }
    });


    //移动端样式

    //phone左侧按钮控制展开与闭合
    // function iconcontrol() {
    //     const icon = document.getElementsByClassName('mobile_icon')[0];
    //     const first_link = document.getElementsByClassName('first_link_wraper')[0];
    //     const headerLink = document.getElementsByClassName('header_link');
    //     const loopMenuWraper = document.getElementsByClassName('loop_menu_wraper');
    //     icon.onclick = function() {
    //         if (Array.from(first_link.classList).some(function(value) {
    //                 return value == 'none'
    //             })) {
    //             console.log(first_link.classList);
    //             first_link.classList.remove('none')
    //         } else {
    //             for (j = 0; j < headerLink.length; j++) {
    //                 headerLink[j].classList.remove('active');
    //                 headerLink[j].children[0].children[1].src = '/cn/image/header/downwardArrow.svg'
    //                 loopMenuWraper[j].classList.remove('active');
    //             }
    //             first_link.classList.add('none')
    //         }
    //     }
    // }
    //首层导航控制
    function headerPhoneTop(a, b) {
        if (!phone) return
        for (var i = 0; i < a.length; i++) {

            //控制鼠标点击样式
            a[i].onclick = function (i) {
                return function () {
                    if (!a[i].parentNode.className.split(" ").some(checkActive)) {
                        // a[i].parentNode.children[0].children[1].src = '/cn/image/header/downwardArrowSelected.svg';
                        for (var j = 0; j < a.length; j++) {
                            if (j == i) {
                                a[j].parentNode.classList.add('active');
                                b[j].classList.add('active')
                            } else {
                                a[j].parentNode.classList.remove('active');
                                b[j].classList.remove('active');
                                // a[j].parentNode.children[0].children[1].src = '/cn/image/header/downwardArrow.svg';
                            }
                        }
                    } else {
                        // a[i].parentNode.children[0].children[1].src = '/cn/image/header/downwardArrow.svg';
                        for (var j = 0; j < a.length; j++) {
                            if (j == i) {
                                a[j].parentNode.classList.remove('active');
                                b[j].classList.remove('active');
                            }
                        }
                    }
                }
            }(i);
        }
    }

    function checkActive(value) {
        return value == 'active';
    }
    //清除pc端初始默认的active
    clearActive();

    function clearActive() {
        console.log(phone);
        if (!phone) return;
        Array.from(document.getElementsByClassName('list_item')).map(function (item, index) {
            item.classList.remove('active');
        });
        Array.from(document.getElementsByClassName('right_loopMenu')).map(function (item, index) {
            item.classList.remove('active');
        });
        Array.from(document.getElementsByClassName(' middle_loop_menu')).map(function (item, index) {
            item.classList.remove('active');
        });
        const loopMenuWraper = document.getElementsByClassName('loop_menu_wraper');
        const first_link = document.getElementsByClassName('first_link_wraper')[0];
        const headerLink = document.getElementsByClassName('header_link');
        for (j = 0; j < headerLink.length; j++) {
            headerLink[j].classList.remove('active');
            headerLink[j].children[0].children[1].src = '/cn/image/header/downwardArrow.svg'
            loopMenuWraper[j].classList.remove('active');
            loopMenuWraper[j].classList.remove('animation_downOut');
        }
        first_link.classList.add('none')
    }


    //phone 下级层控制
    function headerBoxPhoneOne(a, b) {
        if (!phone) return
        for (var i = 0; i < a.length; i++) {
            a[i].parentNode.onclick = function (i) {
                return function () {
                    if (!a[i].className.split(" ").some(checkActive)) {
                        a[i].children[1].src = '/cn/image/header/downwardArrowSelected.svg';
                        for (var j = 0; j < a.length; j++) {
                            if (j == i) {
                                a[j].classList.add('active');
                                b[j].classList.add('active');
                                stopPropagation();
                            } else {
                                a[j].classList.remove('active');
                                b[j].classList.remove('active');
                                a[j].children[1].src = '/cn/image/header/downwardArrow.svg';
                                stopPropagation();
                            }
                        }
                    } else {
                        a[i].children[1].src = '/cn/image/header/downwardArrow.svg';
                        for (var j = 0; j < a.length; j++) {
                            if (j == i) {
                                a[j].classList.remove('active');
                                b[j].classList.remove('active');
                                stopPropagation();
                            }
                        }
                    }
                }
            }(i);
        }
    }

    function stopPropagation(e) {
        e = e || window.event;
        if (e.stopPropagation) { //W3C阻止冒泡方法  
            e.stopPropagation();
        } else {
            e.cancelBubble = true; //IE阻止冒泡方法  
        }
    }

    window.addEventListener('scroll', function () {
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        if (scrollTop === 0) {

        } else {
            if (phone) {
                const loopMenuWraper = document.getElementsByClassName('loop_menu_wraper');
                const first_link = document.getElementsByClassName('first_link_wraper')[0];
                const headerLink = document.getElementsByClassName('header_link');
                for (j = 0; j < headerLink.length; j++) {
                    headerLink[j].classList.remove('active');
                    // headerLink[j].children[0].children[1].src = '/cn/image/header/downwardArrow.svg'
                    loopMenuWraper[j].classList.remove('active');
                }
                first_link.classList.add('none')
            } else {
                const loop_menu_wraper = document.getElementsByClassName('loop_menu_wraper');
                const header_link = document.getElementsByClassName('header_link');
                for (var i = 0; i < loop_menu_wraper.length; i++) {
                    loop_menu_wraper[i].classList.remove('active')
                    header_link[i].classList.remove('active')
                }
            }
        }
    });

    $('.contact_us_btn .btn').hover(function () {
        $('.f_img').css('display', 'block')
        $('.f_img_active').css('display', 'none')
        $(this).find('.f_img').css('display', 'none')
        $(this).find('.f_img_active').css('display', 'block')
    }, function () {
        $('.f_img').css('display', 'block')
        $('.f_img_active').css('display', 'none')
        // $(this).find('f_img').css('display', 'none')
        // $(this).find('f_img_active').css('display', 'block')
    });



    $('.tel').attr("data-clipboard-text", "010-63634201");
    var clipboard = new ClipboardJS('.tel');
    clipboard.on('success', function (e) {
        layer.msg("已复制成功: " + e.text);
    });
    clipboard.on('error', function (e) {
        layer.open({
            title: '提示',
            content: '您的浏览器可能不支持，请手动复制~'
        });
    });

    var clipboard = new ClipboardJS('.email_txt');
    clipboard.on('success', function (e) {
        layer.msg("已复制成功: " + e.text);
    });
    clipboard.on('error', function (e) {
        layer.open({
            title: '提示',
            content: '您的浏览器可能不支持，请手动复制~'
        });
    });


});

function jumpHtml(str, bool) { //第二个参数用来判断移动端是否跳转
    //stopPropagation();
    var ua = navigator.userAgent;
    isAndroid = /(?:Android)/.test(ua),
        isTablet = isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) //平板
    isPhone = /(?:iPhone)/.test(ua) || (isAndroid && /(?:Mobile)/.test(ua));
    console.log(isPhone)
    console.log(isTablet)
    if (!isPhone) {
        // stopPropagation();
    }
    if (isTablet || isPhone) {
        if (bool) {
            window.location.href = str;
        }

    } else {
        window.location.href = str;
    }
}