头像

jQuery+css3线性流体导航菜单动画特效

来源:http://www.sucaihuo.com/js/3796 素材火管理员 2018-07-08 11:17浏览(512) 收藏

一款简单好看的jQuery+css3线性流体导航菜单动画特效,鼠标点击导航菜单项下划线流动动画代码。
jQuery+css3线性流体导航菜单动画特效
分类:导航菜单 > 动画导航 难易:初级

程序员,你不是一个人;网站开发QQ群:698377651,在线充值,或联系QQ1556472052直接充值

查看演示 下载资源: 6 下载资源 下载积分: 20 积分

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>
最新交易
评论8
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1556472052

  • 头像 7楼
    07-11 08:24
    涂***乐
    谢谢分享,就是这次用不到,O(∩_∩)O哈哈~
  • 头像 6楼
    07-09 14:01
    u_***00
    非常实用的效果,感谢大佬!
  • 头像 5楼
    07-09 10:38
    AJ***on
    这个效果很实用,谢谢分享出来!
  • 头像 4楼
    07-09 08:43
    木***偶
    应用性很强,过渡很平滑,赞
  • 头像 3楼
    07-09 08:34
    en***37
    特效还不错呢。。。导航
  • 头像 板凳
    07-09 08:04
    1***秀
    这个特效效果也还不错
  • 头像 椅子
    07-09 07:52
    不***火
    很好的动画效果
  • 头像 沙发
    07-08 15:03
    u *** ゜
    效果不错,可以学习。
1 2