Горизонтальное jquery горизонтальный аккордеон

Гармошка из фотографий на jQuery

Плагин jQuery splits-slider Plugin для создания горизонтального аккордеона фотографий

Автор назвал данный плагин слайдером, но мне он больше напоминает горизонтальный аккордеон.

Пример:

• 
• 
• 
• 
• 

jQuery:

splits-slider на github

Вариант без использования JS:

Похожее решение можно сделать без использования скриптов.

Плюс добавим к этому диагональное разделение (как просили в комментариях).

Точно такой же, как и в примере выше

В итоге у нас получится это:

• 
• 
• 
• 
• 

• Опубликовано: 16.06.2019 / Обновлено: 13.07.2020
• Рубрики: Меню и аккордеоны, Слайдеры и карусели, Фото, аудио и видео
• Метки: jQuery, Фото
• 5313 просмотров

Смотрите также:

Сетка из шестиугольников на CSS

Адаптивная сетка из шестиугольников для фотогалереи или кратких информационных блоков

Полноэкранное мобильное меню

Полноэкранное мобильное меню с фиксированной иконкой-гамбургер

Многоуровневое вертикальное меню

Многоуровневое вертикальное меню с выпадающим списком по клику на плюсик

Добавить комментарий:

Комментарии:

Можно ли гармошку через диагональные разделения?

Можно, но там помудрить надо, например
для li устанавливаем обрезку и отрицательный маргин с запасом:

И дальше уже на JS нужно увеличить ширину всего, т.к. у нас будет наложение одних фоток на другие.

Источник

w3.org.ua

уроки front-end и back-end

Рубрики

jQuery. Пишем аккордеон с применением эффектов

Итак, мы будем писать простой аккордеон на jQuery. Для этого я сделаю небольшой экскурс в теорию.

Небольшое введение в эффекты

Самые простые эффекты в jQuery это hide() — show() и slideUp() и slideDown() .

Итак, hide(time) – скрывает элемент, к которому применяется за время, указанное в качестве параметра (время указывается в миллисекундах). Как работает эффект? За указанное время начинает уменьшаться высота и ширина элемента, значения padding и margin . Когда данные значения уменьшаются до нуля – к элементу применяется свойство display: none .

Эффект show() – работает аналогично, только в обратную сторону. Также, существует эффект анимации toggle() – который либо скрывает, либо показывает элемент с учетом его текущего состояния. Смотрим пример:

Эффекты slideUp() и slideDown() работают аналогично, только изменяется высота элемента. После того, как высота становится равна нулю – применяется свойство display: none .

Время эффектов указывается в миллисекундах. Так 3000 – это три секунды.

Также существует эффект slideToggle() , который переключает состояние элемента.

Смотрим примеры и код:

Строим аккордеон

Теперь строим аккордеон. Пусть у нас будет общий блок #accordeon внутри которого и будет размещаться наш код. Внутри данный блок будет содержать блок с заголовком ( .acc-head ) и блок с текстом( .acc-body ), который в начальном состоянии скрыт.

Источник

jQuery Horizontal Accordion — «играем» на аккордеоне

В этом примере я покажу как создать «эффект аккордеона», который можно использовать как для меню, так и для любых других целей. Раньше для этих целей использовался Flash, но теперь можно воспользоваться и jQuery.

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

Теперь позвольте, представить html-код для этого примера. Я указал для первой ссылки id, чтобы мы могли установить начальную ширину и заставить его казаться раскрытым, когда страница загружается.

Добавляем стили, тут все очень просто.
ul <
list-style: none;
margin: 0;
padding: 0;
>
ul li <
float: left;
padding: 10px;
display: block;
margin-right: 10px;
>
ul li a <
display: block;
overflow: hidden;
height: 75px;
width: 75px;
>
#a1 <
width: 210px;
>
ul li img <
position: absolute;
border: 3px solid #881212;
>
ul li span <
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
>

А вот и jQuery-скрипт, который заставляет все это работать. Это может быть размещено между тегами .
$(document).ready(function() <
lastBlock = $(«#a1»);
maxWidth = 210;
minWidth = 75;

$(«ul li a»).hover(
function() <
$(lastBlock).animate(, < queue:false, duration:400 >);
$(this).animate(, < queue:false, duration:400>);
lastBlock = this;
>
);
>);

Первым делом мы установливаем несколько переменных:
lastBlock представляет блок, который уже раскрыт,
maxWidth — ширина, которую мы хотим установить для блока, когда он раскрыт,
minWidth — ширина свернутого блока.
Затем мы просто вешаем функцию на событие hover для всех ссылок, содержащихся в пределах всех пунктов списка. Здесь мы дважды вызываем функцию animate(): первый раз, чтобы закрыть lastBlock, и другой раз, чтобы раскрыть блок на который мы навели мышь. Затем мы устанавливаем lastBlock равный блоку, который мы только что раскрыли. Это для того, чтобы jQuery «знал», какой закрыть блок в следующий раз. Функция animate() позволяет создавать различную анимацию, устанавливая разные значения для различных свойств, но в данном случае мы только «анимируем» ширину.
Подробнее о функии animate() Вы можете прочить в официальной документации.

Источник

make jquery ui accordion horizontal

I am using jquery ui accordion to view different data to user, it’s working perfectly as described in jquery ui/demos, however what I want to achieve is to change the effect of the sliding effect such that instead of sliding up and down, i want to make it slide left and right (like image catalouges, visual design in this page http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+horizontal&sp=1) so is it possible to do that? javascript:

2 Answers 2

Hiya 2 Working demos which ever suits you for the cause: http://jsfiddle.net/g4NLf/

—EDIT— 5th September: new demo: http://jsfiddle.net/g4NLf/ or http://jsfiddle.net/g4NLf/show

one sues simple accordion and another use a a small lib for.

Hope this helps you! 🙂

HTML is in the demo link but of you want I can paste it in this post; Also please lemme know if it helps you!

Источник

Горизонтальный раздвижной аккордеон для сайта

В последнее время такие элементы как раздвижные аккордеоны на сайтах стали весьма популярные, скрывают лишнюю информацию, помогают оживить Ваш ресурс и привлекают взор посетителей. В этой уроке речь пойдет о горизонтальном аккордеоне с возможностью слайдера реализованного при помощи jQuery. Куски аккордеона раздвигаются при клике и показывает дополнительную информацию, например текст, а другие панели аккордеона начнут сжиматься. Следует отметить, что данный аккордеон является полностью адаптивным.

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

Так как на дворе наступила зима, мы немного украсили аккордеон, чтобы придать ему немного рождественского настроение, и дополнить новогодний мотив. И так, давайте приступим.

Шаг 1. HTML

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

Источник