jQuery导航底部横线跟随鼠标特效
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用jQuery制作当鼠标移入导航的时候，导航底部横线跟追鼠标移动。

制作步骤：首先定义数组预制底部横线距离左侧距离，定义鼠标移入事件，当鼠标移入，获得焦点字体变色。设置底部横线距离左侧距离，当鼠标移出，失去焦点字体颜色恢复。底部横线距离左侧距离恢复到初始位置。

关键js代码与说明

<script>
    //顶部导航
    //定义数组预制底部横线距离左侧距离
    var navarr = ['20px', '130px', '240px', '350px', '460px']

    //鼠标移入事件
    $('.headr-nav li').mouseover(function () {
        //获得焦点字体变色
        $('.headr-nav li a').eq($(this).index('li')).css('color', '#4AB344')
        //设置底部横线距离左侧距离
        $('.spbottom:eq(0)').css('left', navarr[$(this).index()])
    })
    //鼠标移入事件
        .mouseout(function () {
            //失去焦点字体颜色恢复
            $('.headr-nav li a').eq($(this).index('li')).css('color', '')
            //底部横线距离左侧距离恢复
            $('.spbottom:eq(0)').css('left', '20px')
        })
    
</script>