请选择 进入手机版 | 继续访问电脑版

jQuery CSS3导航菜单下划线动画特效

[复制链接]
查看1143 | 回复0 | 2021-2-22 16:05 | 显示全部楼层 |阅读模式

jQuery CSS3导航菜单下划线动画特效

jQuery CSS3导航菜单下划线动画特效


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

  1. js代码

  2. <script>
  3. var nav = $('nav');
  4. var line = $('<div />').addClass('line');

  5. line.appendTo(nav);

  6. var active = nav.find('.active');
  7. var pos = 0;
  8. var wid = 0;

  9. if(active.length) {
  10.   pos = active.position().left;
  11.   wid = active.width();
  12.   line.css({
  13.     left: pos,
  14.     width: wid
  15.   });
  16. }

  17. nav.find('ul li a').click(function(e) {
  18.   if(!$(this).parent().hasClass('active')) {
  19.     e.preventDefault();

  20.     var _this = $(this);

  21.     nav.find('ul li').removeClass('active');

  22.     var position = _this.parent().position();
  23.     var width = _this.parent().width();

  24.     if(position.left >= pos) {
  25.       line.animate({
  26.         width: ((position.left - pos) + width)
  27.       }, 300, function() {
  28.         line.animate({
  29.           width: width,
  30.           left: position.left
  31.         }, 150);
  32.         _this.parent().addClass('active');
  33.       });
  34.     } else {
  35.       line.animate({
  36.         left: position.left,
  37.         width: ((pos - position.left) + wid)
  38.       }, 300, function() {
  39.         line.animate({
  40.           width: width
  41.         }, 150);
  42.         _this.parent().addClass('active');
  43.       });
  44.     }

  45.     pos = position.left;
  46.     wid = width;
  47.   }
  48. });
  49. </script>
复制代码
jQuery CSS3导航菜单下划线动画特效.zip (34.48 KB, 下载次数: 408)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
436
贡献
4
丢币
318
主题
163
回帖
1
注册时间
2021-2-21
最后登录
2023-3-12