dachuan
/
head.html

<!-- 此头部为首页外的其他页面引用，首页头部特殊，代码写在首页html内部-->
<head>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1023382_aaghiohov7m.css"/>
</head>
<div class="heads">
    <div class="head">
        <div class="head_inner">
            <div class="head_logo">
                <img src="images/index/logo.png" alt=""/>
            </div>
            <div class="head_rt">
                <ul class="head-list">
                    <li  class="active"><a href="#"> 首页 </a></li>
                    <li><a href="#"> 产品服务 </a>
                        <div class="xl-s">
                            <ul class="xl-list">
                                <li><a href="#">360全景环视系统</a></li>
                                <li><a href="#">ADAS/DMS</a></li>
                                <li><a href="#">V2X</a></li>
                                <li><a href="#">车载视频主动安全设备</a></li>
                                <li><a href="#">T-BOX</a></li>
                                <li><a href="#">路测停车系统</a></li>
                                <li><a href="#">智能锁</a></li>
                                <div class="both"></div>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#"> 解决方案 </a></li>
                    <li><a href="#"> 资质产权 </a></li>
                    <li><a href="#"> 合作伙伴 </a></li>
                    <li><a href="#"> 关于我们 </a></li>
                    <li><a href="#"> 联系我们 </a></li>
                </ul>
            </div>
        </div>
        <div class="head-phone">
            <div class="head-logo lf">
                <a href="#">
                    <span><img src="images/index/logo.png" alt=""/></span>
                </a>
            </div>
            <div class="top_cen rt">
                <a href="javascript:;">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
                <a class="cen_x active" href="javascript:;">
                    ×
                </a>
            </div>
            <ul class="navlist_mo">
                <li>
                    <a href="#">首页</a>
                </li>
                <li class="mo">
                    <a>产品服务</a>
                    <ul class="abm_nav">
                        <li class="active"><h3><a href="#"></a>360全景环视系统</h3></li>
                        <li><h3><a href="#"></a>ADAS/DMS</h3></li>
                        <li><h3><a href="#"></a>V2X</h3></li>
                        <li><h3><a href="#"></a>车载视频主动安全设备</h3></li>
                        <li><h3><a href="#"></a>T-BOX</h3></li>
                        <li><h3><a href="#"></a>路测停车系统</h3></li>
                        <li><h3><a href="#"></a>智能锁</h3></li>
                    </ul>
                </li>
                <li><a href="#"> 解决方案 </a></li>
                <li><a href="#"> 资质产权 </a></li>
                <li><a href="#"> 合作伙伴 </a></li>
                <li><a href="#"> 关于我们 </a></li>
                <li><a href="#"> 联系我们 </a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    $(function(){
        //  鼠标悬浮的头部的动作
        $(".head").on('mouseenter',function(){
            var HlogoSrc=$(".head-logo img").attr("data-src");
            $(".head-logo img").attr("src",HlogoSrc);

        }).on('mouseleave',function(){
            var logoSrc=$(".head-logo img").attr("data-srcs");
            $(".head-logo img").attr("src",logoSrc);
        });
        /*导航搜索效果*/
        $('.head-list>li').on('mouseenter', function () {
            //$(this).children('div:not(:animated)').slideDown(250);
            $(this).children('div.xl-s').css('display','block');
        }).on('mouseleave', function () {
            //$(this).children('div:not(:animated)').slideUp(250);
            $(this).children('div.xl-s').css('display','none');
        });
        //点击切换导航栏按钮  手机端
        $('.head-phone').on('click','.top_cen a',function(){
            if($(this).attr('class')!='active'){
                $(this).addClass('active');
                $(this).siblings().removeClass('active');
            }else{
                $(this).removeClass('active');
                $(this).siblings().addClass('active');
            }
            if($(this).attr('class')!='cen_x active'){
                $('body').css('right','50%');
                $('.nav_bg').fadeIn();
                $('.navlist_mo').css('right','0');
            }else{
                $('body').css('right','0');
                $('.nav_bg').fadeOut();
                $('.navlist_mo').css('right','-50%');
            }
        });
        //侧边栏点击切换效果  手机端
        $('.head-phone').on('click','.mo>a',function(){
            if($(this).parent().attr('class')!='mo active'){
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
            }else{
                $(this).parent().removeClass('active');
            }
        });
        /*三级*/
        $('.abm_nav li h3').on('click',function(){
            if($(this).parent().attr('class')!='active'){
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
            }else{
                $(this).parent().removeClass('active');
            }
        })

    })
</script>