js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS广告代码 > JS幻灯片

kissy仿阿里云滑动下拉导航菜单特效

发布时间:2015-09-06 15:33:18    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

kissy仿阿里云滑动下拉导航菜单特效
(function() {
//  var callbackUrl, suffix;

  KISSY.use('node,ua', function(S, Node, UA) {
    var $, childMenuEl, coords, downMoveEnd, getCoords, getDirection, hideSubmenu, lastPoint, menuEl, menuList, setPaddingLeft, showSubmenu, subMenuEl, subMenuEls;
    $ = S.all;
    menuList = S.all('#J_Menu li');
    subMenuEl = $('#J_subMenus');
    menuEl = $('#J_Menu');
    childMenuEl = $('#J_subMenus dd>a');
    subMenuEls = $('.sub-menu');
    coords = [];
    lastPoint = {};
    downMoveEnd = {};
    getCoords = function() {
      var coords_Arr;
      coords_Arr = [];
      S.each(menuList, function(o, i) {
        var coord;
        coord = {
          'start': $(o).offset().left,
          'end': $(o).offset().left + $(o).width(),
          'elm': $(o)
        };
        return coords_Arr.push(coord);
      });
      return coords_Arr;
    };
    setPaddingLeft = function() {
      coords = getCoords();
      return S.each(menuList, function(o, i) {
        var menuId, menuType, _left, _menu_width;
        menuId = '#' + $(o).attr('data-menu') + ' .first';
        menuType = $(o).attr('data-case');
        if (menuType === 'one') {
          _left = $(o).one('h2').offset().left;
        } else if (menuType === 'two') {
          _left = $('.header-inner nav').offset().left + 30;
        } else if (menuType === 'three') {
          _menu_width = S.all(window).width() > 1200 ? 290 : 230;
          _left = menuEl.offset().left + menuEl.width() - _menu_width - parseInt($(o).css('padding-right'));
        }
        return S.DOM.css(menuId, {
          marginLeft: _left
        });
      });
    };
    showSubmenu = function(li) {
      var menuId, rowEl;
      rowEl = $(li);
      menuId = '#' + rowEl.attr('data-menu');
      rowEl.addClass('selected').siblings().removeClass('selected');
      return $(menuId).addClass('show').siblings().removeClass('show');
    };
    hideSubmenu = function() {
      subMenuEl.all('.sub-menu').removeClass('show');
      return menuList.removeClass('selected');
    };
    getDirection = function(e, xy) {
      var currentPoint, dir;
      currentPoint = {
        x: e.pageX,
        y: e.pageY
      };
      if (xy === 'y') {
        if (lastPoint.y > currentPoint.y) {
          dir = 'up';
        } else if (lastPoint.y < currentPoint.y) {
          dir = 'down';
        } else if (lastPoint.y = currentPoint.y) {
          dir = 'hor';
        }
      } else {
        if (lastPoint.x > currentPoint.x) {
          dir = 'left';
        } else if (lastPoint.x < currentPoint.x) {
          dir = 'right';
        } else if (lastPoint.x = currentPoint.x) {
          dir = 'hor';
        }
      }
      lastPoint = currentPoint;
      return dir;
    };
    if (UA.ie !== 6) {
      setPaddingLeft();
      menuEl.on('mouseleave', function(e) {
        var _e;
        _e = e;
        return setTimeout(function() {
          var _left, _width;
          _left = menuEl.offset().left;
          _width = menuEl.width();
          if (((_e.pageX < _left || _e.pageX > _left + _width) && _e.pageY < 75) || _e.pageY < 0) {
            return hideSubmenu();
          }
        }, 400);
      }).on('mousemove', function(e) {
        var dir, el;
        dir = getDirection(e, 'y');
        if (dir === 'up' || dir === 'hor') {
          el = {};
          return S.each(coords, function(o, i) {
            if (o.start < e.pageX && e.pageX < o.end) {
              return showSubmenu(o.elm);
            }
          });
        } else {
          clearTimeout(downMoveEnd);
          return downMoveEnd = setTimeout(function() {
            if (e < 75) {
              el = {};
              return S.each(coords, function(o, i) {
                if (o.start < e.pageX && e.pageX < o.end) {
                  return showSubmenu(o.elm);
                }
              });
            }
          }, 1800);
        }
      });
      subMenuEls.on('mouseleave', function(e) {
        var dir, _left, _width;
        dir = getDirection(e, 'y');
        if (dir === 'down') {
          hideSubmenu();
        }
        if (dir === 'up') {
          _left = menuEl.offset().left;
          _width = menuEl.width();
          if (e.pageX < _left || e.pageX > _left + _width) {
            return hideSubmenu();
          }
        }
      });
      childMenuEl.on('focus', function() {
        var dataMenu;
        dataMenu = $(S.DOM.parent(this, '.sub-menu')).attr('id');
        return showSubmenu(S.DOM.children(menuEl, 'li[data-menu="' + dataMenu + '"]'));
      });
      S.one(window).on('resize', setPaddingLeft);
      $(document.body).on('click', function(e) {
        if (!S.DOM.contains(subMenuEl, $(e.target)) && !S.DOM.contains(menuEl, $(e.target))) {
          return hideSubmenu();
        }
      });
      return $('#J_Menu li').on('singleTap', function(e) {
        if ($(this).hasClass('selected')) {
          return hideSubmenu();
        }
      });
    } else {
      $('.sub-menu').css({
        'top': 0,
        'filter': 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100) !important',
        'display': 'none'
      });
      $('.first').css({
        'margin-left': '5%'
      });
      menuList.on('mouseenter', function(e) {
        $(this).addClass('selected').siblings().removeClass('selected');
        $('#' + $(this).attr('data-menu')).show();
        return $('#' + $(this).attr('data-menu')).siblings().removeClass('show');
      });
      subMenuEls.on('mouseleave', function() {
        return subMenuEls.hide();
      });
      return $('#J_Logined').on('mouseenter', function() {
        return $(this).addClass('hover');
      }).on('mouseleave', function() {
        return $(this).removeClass('hover');
      });
    }
  });

//  suffix = (function() {
//    var output;
//    if (window.location.host.indexOf('china-ops.') === -1) {
//      return '.com';
//    }
//    output = window.location.host.replace(/^.*\.china-ops/i, '');
//    if (!output) {
//      output = '.com';
//    }
//    return output;
//  })();

  //callbackUrl = location.href.indexOf('account.aliyun' + suffix) < 0 ? '?oauth_callback=' + encodeURIComponent(window.location.href) : '';

  KISSY.use();

}).call(this);



导航菜单 下拉

jQuery左侧分类导航特效_jquery商城左侧分类菜单导航_橙色导航菜单特效代码

仿美图秀秀官网,纯CSS二级下拉导航菜单特效

jquery顶部导航菜单下拉,左侧分类切换特效

jQuery仿腾讯云全屏下拉导航菜单特效代码

jquery实现顶部固定、二级栏目之间相互滑动的导航菜单特效

jquery仿海信官网带缩略图下拉导航菜单特效

jquery仿天猫左侧导航菜单分类列表

js实现竖直收缩导航菜单,点击展开折叠菜单特效

jquery导航菜单可拖动特效

jquery实现新闻门户网站二级导航菜单特效

jquery实现中英文字切换导航条,鼠标悬停滑动下拉二级导航菜单

jquery仿马可波罗左侧商品列表导航菜单特效

jquery仿京东商城左侧商品分类导航菜单样式特效_模仿京东二级导航栏_商品分类代码

jquery实现鼠标滚动的时候,导航菜单大小可自动调整的特效

kissy仿阿里云滑动下拉导航菜单特效

jQuery黑色竖直多级导航菜单特效

jquery实现左侧导航菜单滚动特效

jquery仿天猫分类导航通栏底部banner切换代码_jquery仿天猫商城左侧商品分类导航菜单样式特效_模仿天猫二级导航栏

jquery实现垂直多级导航菜单展开收缩特效

CSS实现导航菜单下拉特效代码