最新公告
  • 资源宝-专注于优秀资源,本站秉承服务宗旨 履行“站长”责任, 服务永无止境!
  • jQuery CSS导航菜单下划线动画特效

    一款简单漂亮的jQuery CSS3导航菜单下划线动画特效,鼠标点击导航菜单文字链接时,下划线线性流动动画效果。

    js代码

    <script>
    var nav = $("nav");
    var line = $("<div />").addClass("line");
    line.appendTo(nav);
    var active = nav.find(".active");
    var pos = 0;
    var wid = 0;
    if(active.length) {
      pos = active.position().left;
      wid = active.width();
      line.css({
        left: pos,
        width: wid
      });
    }
    nav.find("ul li a").click(function(e) {
      if(!$(this).parent().hasClass("active")) {
        e.preventDefault();
        var _this = $(this);
        nav.find("ul li").removeClass("active");
        var position = _this.parent().position();
        var width = _this.parent().width();
        if(position.left >= pos) {
          line.animate({
            width: ((position.left - pos) + width)
          }, 300, function() {
            line.animate({
              width: width,
              left: position.left
            }, 150);
            _this.parent().addClass("active");
          });
        } else {
          line.animate({
            left: position.left,
            width: ((pos - position.left) + wid)
          }, 300, function() {
            line.animate({
              width: width
            }, 150);
            _this.parent().addClass("active");
          });
        }
        pos = position.left;
        wid = width;
      }
    });
    </script>
    
    资源宝-—专注于优秀资源搜集共享与发布
    资源宝 » jQuery CSS导航菜单下划线动画特效
    云服务器独立IP17/月,性能有保障
    代搭各种APP,游戏,高难度PHP解密 QQ:805531199
    有想要源码联系博主反馈,第一时间更新

    本站所有资源来源于网络,仅限用于学习研究;无任何技术支持!不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除内容。如果您喜欢,请支持正版。如有侵权请邮件与我们联系处理。

    发表评论

    • 99999访问总数
    • 390会员总数(位)
    • 11061资源总数(个)
    • 900 资源大小(GB)
    • 761稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情