jQuery - без использования плагина, как сделать горизонт прокрутки по нажатой ссылке до положения дочернего элемента, идентификатор которого соответствует привязке ссылки? - PullRequest
Новая
       7

jQuery - без использования плагина, как сделать горизонт прокрутки по нажатой ссылке до положения дочернего элемента, идентификатор которого соответствует привязке ссылки?

0 голосов
/ 27 мая 2011

У меня есть элемент стиля карусели, который использует кнопки «следующий / предыдущий» для перемещения по элементам внутри контейнера.Контейнер имеет фиксированную ширину, а переполнение скрыто.Я хотел бы использовать ссылки для прокрутки div до позиции дочернего элемента контейнера, идентификатор которого совпадает с привязкой ссылки.

Разметка ссылки: 

<div class="time-range">

   <ul id="time-nav">
      <li><a href="#1" id="1pm" class="time-chooser">1pm</a></li>
      <li><a href="#2" id="2pm" class="time-chooser">2pm</a></li>
      <li><a href="#3" id="3pm" class="time-chooser">3pm</a></li>
      <li><a href="#4" id="4pm" class="time-chooser">4pm</a></li>
      <li><a href="#5" id="5pm" class="time-chooser">5pm</a></li>
      <li><a href="#6" id="6pm" class="time-chooser">6pm</a></li>
   </ul>

</div>

Разметка карусели: 

<div class="pane-container">
   <div class="carousel-pane" id="1">BLAH BLAH BLAH</div>
   <div class="carousel-pane" id="2">BLAH BLAH BLAH</div>
   <div class="carousel-pane" id="3">BLAH BLAH BLAH</div>
   <div class="carousel-pane" id="4">BLAH BLAH BLAH</div>
   <div class="carousel-pane" id="5">BLAH BLAH BLAH</div>
   <div class="carousel-pane" id="6">BLAH BLAH BLAH</div>
</div>

Я использую библиотеку jQuery, я просто не хочу использовать дополнительный плагиндля этой функциональности.

Обычный Javascript тоже подойдет ...

Спасибо!

1 Ответ

0 голосов
/ 27 мая 2011

Если панели имеют фиксированную ширину, вы можете использовать простую математику: 

$("#time-nav").delegate("a","click",function(e) {
   var $link = $(e.target);
   $("#pane-container").animate({scrollLeft:parseInt($link.attr("id")) * YOUR_WIDTH});
});

Если ширина меняется, вам нужно захватить смещение.Это требует, чтобы ваш родитель позиционировался 

$("#time-nav").delegate("a","click",function(e) {
   var $link = $(e.target);
   var offset = $("#pane-container").find("div[id=" + parseInt($link.attr("id")) + "]")[0].offsetLeft;
   $("#pane-container").animate({scrollLeft:offset });
});
...