Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как отобразить блок который не виден (https://javascript.ru/forum/misc/15914-kak-otobrazit-blok-kotoryjj-ne-viden.html)

Pumych 19.03.2011 03:14

Как отобразить блок который не виден
 
Делаю сроллер для фотогалереи.
Допустим что имеем такой код:
<div id="scroller">
    <span id="thumb-0"><img src="0.jpg"></span>
    <span id="thumb-1"><img src="1.jpg"></span>
    <span id="thumb-2"><img src="2.jpg"></span>
    <span id="thumb-3"><img src="3.jpg"></span>
    <span id="thumb-4"><img src="4.jpg"></span>
    <span id="thumb-5"><img src="5.jpg"></span>
  </div>


Код:

#scroller {
width: 100px;
height: 30px;
overflow: hidden;
}
img {
height: 30px;
}

Если в блоке #scroller отображаются две первые картинки (thumb-0, thumb-1), т.е. остальные не видны потому что не влезают в блок, подскажите п-стя каким образом можно перемотать на следующие одну-две? Т.е. нажатие на кнопку и запуск функции в которой... а вот тут не знаю как быть.

Пробовал с помощью innerHTML вставлять фотки с середины массива но этот вариант кажется не правильным.

poorking 19.03.2011 03:38

В вашем случае c помощью js вы должны менять значение динамических свойств или elem.scrollTop или elem.scrollLeft, смотря как задумали, так как в CSS вы скрыли полосу прокрутки, и руками не прокрутить, также могут понадобиться свойства scrollWidth и scrollHeight.

ПС Не уверен, но кажется помещать в inline элемент span картинку, которая inline-block - плохо.

person 19.03.2011 09:54

Картинка строковый элемент

Matre 19.03.2011 10:50

Pumych, меняйте свойство scrollTop у DIV-а:

document.getElementById("scroller").scrollTop += 10; // Прокрутить вниз на 10 пикселей


Для прокрутки вверх изменить += на -=


Часовой пояс GMT +3, время: 16:14.