горизонтальная прокрутка, определение положения прокрутки относительно якорей

Question

Хорошо, я создаю горизонтальный веб-сайт для фотографа. У нас есть несколько действительно хороших каркасов, и я собираюсь создать аккуратный эффект, при котором он будет постоянно выделять конкретную фотографию, которая находится слева от экрана, или, более конкретно, установить прозрачность на 40% для всех остальных фотографий.

Итак, я знаю, что могу добавить привязки к каждой фотографии, чтобы использовать ее для перехода к следующему параметру, но что, если пользователь использует полосу прокрутки вручную, есть ли какой-то способ для меня определить положение относительно каждой Фото. Имейте в виду, чтобы сделать это еще более неловким, даже если каждая фотография имеет одинаковую высоту, они могут иметь разную ширину.

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

Так может кто-нибудь сказать мне, возможно ли это, и если да, то как? Любые другие идеи, чтобы заставить это работать, приветствуются.

Answer 1

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

Вы можете увидеть демо здесь: http://jsfiddle.net/XAa3Y/57/

Надеюсь, это поможет.

Answer 2

Вы можете изменить (или лучше улучшить) путевые точки с поддержкой горизонтальной прокрутки.Это не так сложно, как я мог видеть.

Answer 3

вам придется синтезировать две цифры.

a - вы можете найти положение прокрутки, используя

 oDiv.scrollLeft

b - после загрузки изображений - вы можете суммировать размерыкартинок (или если вы установите его вручную - вам даже не нужно ждать, пока они загрузятся.

oImg.style.width

Если вы дадите одинаковое расстояние между картинками - математика станет очевидной.

Это немного JavaScript, вот и все:)

Answer 4

Задача включает в себя определение положения изображения, положения скроллера и определение ширины изображения.В jQuery вам необходимо использовать scrollLeft () , position () , width () и событие scroll ()

Вот как ты это делаешь.

var $div = $('div'),
    divleft = $div.position().left;
$('div').scroll(function() {
    $('img').each(function() {
        img = $(this);
        imgleft = img.position().left;
        if (imgleft > divleft && imgleft + img.width() < divleft + $div.width()) {
            $(this).css({
                opacity: '1'
            })
        } else {
            $(this).css({
                opacity: '0.2'
            })
        }
    });
})

Проверьте пример на http://jsfiddle.net/Vy33z/4/

Answer 5

Как насчет этого: http://jsfiddle.net/coltrane/Mj6ce/

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

Основная идея такова:

1. Блок прокрутки обеспечивает прокрутку (через overflow-x: auto;), и у него есть единственный непосредственный дочерний блок, который содержит все остальные элементы содержимого.
2. Функция jQuery offset() используется для сравнения левого края скроллера с левым краем элемента содержимого (с использованием координат документа). Это говорит нам, сколько прокручивается скроллер.
3. Затем мы можем просмотреть все элементы по порядку и проверить позицию каждого элемента в элементе содержимого (используя функцию position() jQuery ). Сравнение позиции элемента с текущим значением прокрутки (из шага 2) позволяет нам определить, выделять элемент или нет.
4. Наконец, мы используем событие прокрутки, чтобы запускать обновление каждый раз, когда изменяется прокрутка. Наша функция обновления просто применяет шаги 2 и 3, описанные выше. Я использовал jQuery .scroll() function , чтобы связать событие прокрутки.

Answer 6

Попробуйте использовать поддержку событий jQuery scroll.

http://api.jquery.com/scroll/

И сделайте эту проверку, чтобы увидеть, какое изображение на экране - что-то похожее на это:

Проверьте, виден ли элемент после прокрутки