элементы в окне просмотра div - PullRequest
Новая
       9

элементы в окне просмотра div

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

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

У меня есть меню: 

<div id="work_overview">
    <ul>
        <li><a href="link" class="imgs_work"><img /></a></li>
        <li><a href="link" class="imgs_work"><img /></a></li>
        ....
    </ul>
</div>

Если есть сценарий, которыйперемещает меню: 

$('.imgs_work').click(function(){
    var pos = $(this).position('left');

    $('#work_overview ul').animate({ left:pos.left },1500);
});

Я хочу, чтобы '#work_overview ul li' был размещен на первой позиции при выходе из области просмотра, и я понятия не имею, как этого добиться.

Ответы [ 2 ]

0 голосов
/ 03 мая 2013

На этот похожий вопрос недавно был дан частичный ответ в другом обсуждении. То, что вам нужно будет сделать, это использовать тот метод, который я опубликую, а затем изменить его, чтобы он работал, если индекс последнего элемента в представлении покидает порт представления, удалите его и либо используйте .prepend (), либо вставьте его в HTML с помощью функции индекса на индекс 1.

например: 

var itemToMoveToPosition1 = $('item');
$('li:(0)').html(itemToMoveToPisition1);

Что-то в этом роде. Что касается первой части вашего вопроса, вам нужно сравнить некоторые позиции. Если элемент прокручиваемый, у него есть свойство scrollTop и свойство scrollHeight. Это полная высота содержимого элемента, который он имеет, пока не прокрутится до конца. Отличается от высоты свойства. Поэтому вам нужно сравнить, когда отслеживаемый элемент находится в положении, превышающем высоту, но меньшем, чем высота прокрутки. Это означает, что это вне поля зрения. Если вам нужен пример, который более подробно объясняет это, дайте мне знать, и я могу опубликовать для вас jFiddle. Надеюсь, это поможет.

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

ОК, я понял, так что попробуйте еще раз:

Я предлагаю вам использовать jQuery.prevAll (), чтобы извлечь элемент до нажатия <li> и переместить его в DOM.

Пример здесь, без анимации: http://jsfiddle.net/C9LNf/

Итак, все еще есть проблема с вашей конкретной потребностью. Если я правильно понял, вы хотите переместить <li> только тогда, когда он выйдет из контейнера.

Я понятия не имею, как это сделать просто. Вы можете наблюдать за свойством <li> css и определять, когда левое положение слишком левое, но для этого нет встроенной функции jQuery. Есть некоторые идеи с таймаутами здесь , но я думаю, что это как бульдозер, ваша крошечная проблема.

Другим подходом может быть разделение анимации на несколько для каждого li. Вы оживляете все это, перемещаете элемент в DOM и делаете следующую анимацию.

...