jquery / js скользящий / скользящий эффект элемента навигации - PullRequest
Новая
       15

jquery / js скользящий / скользящий эффект элемента навигации

0 голосов
/ 16 января 2012

Я пытаюсь расшифровать эффекты, подобные тем, которые можно увидеть на http://www.htmldrive.net/items/demo/71/Dynamic-navigation-menu-with-scrolling-color-glide-followed-with-jQuery, но я не очень хорошо знаком с jquery / js (если только код полностью не прописан для меня)

IЯ не смог найти много других примеров этого эффекта меню (возможно, я использую неправильные ключевые слова).

Может кто-нибудь помочь мне понять, как они вообще создаются?Я хотел бы сделать это на своем сайте (хотя с выделением жирным шрифтом вместо выделения).Спасибо!

edit- Я понимаю, что могу просто использовать один из этих плагинов, но мне бы очень хотелось понять, что происходит / сделать свой собственный

Ответы [ 2 ]

1 голос
/ 16 января 2012

Если вы посмотрите демонстрационную версию (, извлеченную из фрейма ), вы увидите JavaScript демонстрационной версии , сопровождаемый некоторыми CSS здесь .Это выглядит достаточно просто.

«Фон» - это отдельный элемент в HTML меню: 

<div class="webwidget_menu_glide_sprite"></div>

Спрайт и меню <ul> абсолютно позиционированы.Стиль <ul> расположен выше спрайта, а спрайт анимируется в ответ на события hover на <li> в меню.

Обновление:

Чтобы рассчитать и выполнить анимацию, у вас есть три основных шага:

  • Прослушивание hoverсобытия на <li> s;
  • Найти ширину и положение элемента "скользить" на основе элемента, вызвавшего эффект hover;
  • Анимировать до указанной ширины и положения.

В своей основной форме это выглядит примерно так: 

/* 1. Attach the event handler: */
$('#menu li').on('hover', function() {
    /* 2. Find the position and width: */
    var newPosition = $(this).position();
    var newWidth = $(this).outerWidth(true);
    /* 3. Animate: */
    $('#menu .glide').stop().animate({
        'left': newPosition.left,
        'width': newWidth
    });
});

Более подробный пример выложен здесь: http://jsbin.com/unuyov.

0 голосов
/ 16 января 2012

Вот общий обзор того, как вы можете создать подобный эффект:

Создать меню, каждый пункт меню находится в отдельном div. Подчеркивание может быть изображением, абсолютно расположенным под первым пунктом меню. У каждого пункта в меню есть функция наведения. Эта функция изменит позицию подчеркивания (влево или вправо), по одному пикселю за раз. Чтобы получить эффект крутого слайда, который ускоряется или замедляется при движении, я бы порекомендовал использовать встроенный плагин.

поэтому пункты меню будут выглядеть примерно так: 

<div id="menuitem2" onmouseover="movesliderto('45');">

Сценарий будет выглядеть примерно так: 

var currentpos= '0'; //initial position

function movesliderto(newposition){
  if (currentpos<newposition){ //moving the slider to the right
   for (var i=currentpos; i<newposition; i++) {
    document.getElementById('underline').style.left += 1;
 } else { //moving the slider to the left
   for (var i=newposition; i<currentpos; i++) {
    document.getElementById('underline').style.left -= 1;
 }
}

и, конечно, вы бы хотели, чтобы каждая итерация foreach занимала пару миллисекунд, поэтому вы хотели бы поместить ее в синхронизируемую функцию.

...