#javascript #html #css
#javascript #HTML #css
Вопрос:
Я работаю над веб-сайтом моей компании и знаю, что хотел бы создать страницу с биографией команды, похожую на эту здесь: https://arch.iit.edu/people
Я пытаюсь воссоздать поле описания, появляющееся под изображением при нажатии на него.
Я пытаюсь найти javascript / coding, который поможет мне сделать это; однако я действительно не знаю, с чего начать, поскольку я выполнил несколько поисковых запросов в раскрывающемся окне описания, lightbox, но это не дает мне того, что я действительно ищу.
Могу ли я попросить помощи о том, где искать, чтобы достичь этого / как этого добиться?
Спасибо.
Ответ №1:
Думаю, я знаю, что именно вы хотите найти для своего веб-сайта. Методы jQuery slide перемещают элементы вверх и вниз. Взгляните на это, на : w3schools.com
Скажите мне, поможет ли это вам
С уважением, Адриан
Комментарии:
1. Это сработало! Это похоже на то, что я хочу сделать. Я смог заставить работать функцию slide, но знаете ли вы, как я мог бы сделать так, чтобы изображения аккуратно скользили вниз, когда описание скользит вниз? Мой слайд отображается за другими изображениями профиля.
2. Я также пытаюсь запустить слайд и в браузере, чтобы я мог создавать разные столбцы с текстом.
Ответ №2:
Это будет очень просто, но вы можете использовать только начало.
$('.holder').on('click',function(){
$(this).find('.description').fadeIn();
}); .description {
display:none;
text-align:center;
background-color: #FFF8DC;
padding: 6px;
font-size: 14px;
}
.holder {
width:140px;
padding:6px;
border:solid 1px #311;
background-color: #000;
}
.holder img {
width:100%;
height: auto;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='holder'>
<img src='http://bjstlh.com/data/wallpapers/65/WDF_1103100.jpg' width='120' height='120'>
<div class='description'>
Lorem ipsum dolor sit amet
</div>
</div>