[代码样式]jQuery弹性滑动导航菜单

[代码样式]jQuery弹性滑动导航菜单

制作方法

引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>

HTML

<div id="nav">
    <div class="nav-menu">
        <a href="#">首页</a>
        <a href="#">了解我们</a>
        <a href="#">产品展示</a>
        <a href="#">服务报价</a>
        <a href="#">最新消息</a>
        <a href="#">联系方式</a>
    </div>
    <div class="nav-current"></div>
</div>

CSS

#nav {
    position: relative;
    margin: 100px auto 0 auto;
    width: 832px;
    border-bottom: 2px #ddd solid;
    _width: 835px;
}
#nav .nav-menu {
    height: 50px;
}
#nav .nav-menu a {
    float: left;
    display: block;
    padding: 0 40px;
    height: 50px;
    color: #666;
    text-decoration: none;
    font-size: 16px;
    line-height: 50px;
}
#nav .nav-current {
    position: absolute;
    bottom: -2px;
    overflow: hidden;
    height: 2px;
    background: #80b600;
}

JavaScript

$(function(){
    (function(){
        var $navcur = $(".nav-current");
        var $nav = $("#nav");
        var current = ".current";
        var itemW = $nav.find(current).innerWidth(); //默认当前位置宽度
        var defLeftW = $nav.find(current).position().left; //默认当前位置Left值
        //添加默认下划线
        $navcur.css({width:itemW,left:defLeftW});
        //hover事件
        $nav.find("a").hover(function(){
            var index = $(this).index(); //获取滑过元素索引值
            var leftW = $(this).position().left; //获取滑过元素Left值
            var currentW = $nav.find("a").eq(index).innerWidth(); //获取滑过元素Width值
            $navcur.stop().animate({
            left: leftW,
            width: currentW
        },300);
        },function(){
            $navcur.stop().animate({
            left: defLeftW,
            width: itemW
        },300);
        });
    })();
});
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]jQuery导航/表头固定插件Posfixed

2020-11-6 9:51:25

脚本代码

[代码样式]WOW.js – 让页面滚动更有趣

2020-11-12 10:47:46

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索