jQuery+css3线性流体导航菜单动画特效免费下载

一款简单好看的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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录