Как изменить изображение, когда оно проходит определенную точку на странице, а затем изменить его обратно, если оно находится выше этой точки? - PullRequest
Новая
       11

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

3 голосов
/ 02 октября 2011

Я совершенно новичок в javascript, но я хочу изучить его, а не jQuery, чтобы получить некоторые фундаментальные знания. Функция, которую я хочу создать, должна анимировать стрелку вверх, когда она проходит 50% страницы. В дополнение к этому функция, которую она вызывает при переворачивании, должна измениться.

Итак: upArrow onClick (scrollUp) downArrow onClick (scrollDown)

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

1 Ответ

4 голосов
/ 02 октября 2011

Вы можете либо написать свойство imageelement.src, чтобы оно указывало на другую стрелку, либо, для дополнительной плавности, использовать спрайт CSS, содержащий обе стрелки, и написать element.style.backgroundPosition, чтобы изменить отображаемое изображение без необходимости загрузки нового изображения.

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

например: 

<div id="arrow" class="arrow-down"></div>


#arrow {
    position: fixed; top: 0; left: 0; z-index: 10;
    width: 32px; height: 32px;
    background-image: url(/img/arrow.png);
}
.arrow-down {
    background-position: 0 0;
}
.arrow-up {
    background-position: 0 -32px;
}


var arrow= document.getElementById('arrow');

window.onscroll=window.onresize= function() {
    arrow.className= isHalfwayDown()? 'arrow-up' : 'arrow-down';
};
arrow.onclick= function() {
    var h= document.documentElement.scrollHeight;
    scrollTo(0, isHalfwayDown()? 0 : h);
    window.onscroll();
};

function isHalfwayDown() {
    var y= document.documentElement.scrollTop+document.body.scrollTop;
    var h= document.documentElement.scrollHeight;
    return y>=h/2;
}

Замечания по совместимости браузера: window.onscroll() потому, что IE не запускает событие прокрутки, когда используется scrollTo(). Смещения прокрутки как html, так и body должны быть добавлены вместе в isHalfwayDown(), потому что браузеры, к сожалению, не согласны с тем, какой элемент представляет область просмотра.

...