Аккордеон изображений jquery – Новые слайдеры, аккордеоны и слайд-шоу. jQuery решения для веб-разработчиков — jQuery & Plugins

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

var storm = this,

features,

isIE = navigator.userAgent.match(/msie/i),

isIE6 = navigator.userAgent.match(/msie 6/i),

isMobile = navigator.userAgent.match(/mobile|opera m(ob|in)/i),

isBackCompatIE = (isIE && document.compatMode === 'BackCompat'),

noFixed = (isBackCompatIE || isIE6),

screenX = null, screenX2 = null, screenY = null, scrollY = null, docHeight = null, vRndX = null, vRndY = null,

windOffset = 1,

windMultiplier = 2,

flakeTypes = 6,

fixedForEverything = false,

targetElementIsRelative = false,

opacitySupported = (function(){

try {

document.createElement('div').style.opacity = '0.5';

} catch(e) {

return false;

}

return true;

}()),

didInit = false,

docFrag = document.createDocumentFragment();

 

features = (function() {

 

var getAnimationFrame;

 

..................................

 

this.show = function() {

var i;

for (i=0; i<this.flakes.length; i++) {

this.flakes[i].o.style.display = 'block';

}

};

 

this.SnowFlake = function(type,x,y) {

var s = this;

this.type = type;

this.x = x||parseInt(rnd(screenX-20),10);

this.y = (!isNaN(y)?y:-rnd(screenY)-12);

this.vX = null;

this.vY = null;

this.vAmpTypes = [1,1.2,1.4,1.6,1.8];

this.vAmp = this.vAmpTypes[this.type] || 1;

this.melting = false;

this.meltFrameCount = storm.meltFrameCount;

this.meltFrames = storm.meltFrames;

this.meltFrame = 0;

this.twinkleFrame = 0;

this.active = 1;

this.fontSize = (10+(this.type/5)*10);

this.o = document.createElement('div');

this.o.innerHTML = storm.snowCharacter;

if (storm.className) {

this.o.setAttribute('class', storm.className);

}

this.o.style.color = storm.snowColor;

this.o.style.position = (fixedForEverything?'fixed':'absolute');

if (storm.useGPU && features.transform.prop) {

this.o.style[features.transform.prop] = 'translate3d(0px, 0px, 0px)';

}

this.o.style.width = storm.flakeWidth+'px';

this.o.style.height = storm.flakeHeight+'px';

this.o.style.fontFamily = 'arial,verdana';

this.o.style.cursor = 'default';

this.o.style.overflow = 'hidden';

this.o.style.fontWeight = 'normal';

this.o.style.zIndex = storm.zIndex;

docFrag.appendChild(this.o);

 

this.refresh = function() {

if (isNaN(s.x) || isNaN(s.y)) {

return false;

}

storm.setXY(s.o, s.x, s.y);

};

Как сделать элегантный аккордеон с JQUERY и CSS3

Сегодня мы будем создавать элегантный аккордеон для контента. Идея состоит в том, чтобы несколько вертикальных вкладок с контентом раздвигались в стороны при наведении на одну из них курсором мыши. Для улучшения внешнего вида аккордеона будут использованы некоторые свойства CSS3. Давайте приступим!

 

 

Вы можете нажать на ссылку под изображением для просмотра демо или же для скачивания исходных документов.

                                    Демо             Загрузить материалы

Начнем в первую очередь с разметки.

РАЗМЕТКА

HTML будет состоять из списка, где каждая вкладка аккордеона — это элемент списка. Внутри элемента списка будет заголовок, который исчезает при наведении. Кроме того будет элемент для фона с белым градиентом и блок для описания.

<ul> <li> <div>Heading</div> <div></div> <div> <h3>Heading</h3> <p>Some descriptive text</p> <a href="#">more ?</a> </div> </li> </ul>

Остальные элементы будут иметь классы bg2, bg3 и bg4. Неупорядоченный список получает класс и id, так как мы будет в дальнейшем обращаться к нему в JavaScript.

CSS

Стили для списка будут следующими:

ul.accordion{
    list-style:none;
    position:absolute;
    right:80px;
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}

Все элементы списка будут иметь разное фоновое изображение и поэтому в первую очередь зададим общие свойства стиля для каждого элемента списка:

ul.accordion li{
    float:right;
    width:115px;
    height:480px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
    background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
    background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
    background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
    background-image:url(../images/4.jpg);
}

Отметим, что box shadow не будет работать в IE.

Начальная ширина каждого пункта будет 115 пикселей. В JavaScript это значение будет изменено при наведении до 480px.

Граница вокруг элемента должна быть применена только для одной стороны элемента, в противном случае у нас бы получалась двойная рамка между пунктами и одинарная рамка на внешних границах. Нужно определить класс для левой границы, который будем применять для последнего элемента списка (так как элементы плавают справа, поэтому применять стили будем в обратном порядке):

ul.accordion li.bleft{
    border-left:2px solid #fff;
}

Теперь необходимо придать хороший вид заголовку с белым полупрозрачным фоном для каждого элемента списка при «замкнутом» состоянии аккордеона:

ul.accordion li .heading{
    background-color:#fff;
    padding:10px;
    margin-top:60px;
    opacity:0.9;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:14px;
    color:#444;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
}

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

ul.accordion li .description{
    position:absolute;
    width:480px;
    height:175px;
    bottom:0px;
    left:0px;
    display:none;
}

Сначала установим display:none, так как мы хотим, чтоб элемент появлялся только при наведении. Вот стили других элементов:

ul.accordion li .description h3{
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:45px;
    color:#444;
    text-align:left;
    margin:0px 0px 15px 20px;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
    line-height:14px;
    margin:10px 22px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em;
}
ul.accordion li .description a{
    position:absolute;
    bottom:5px;
    left:20px;
    text-transform:uppercase;
    font-style:normal;
    font-size:11px;
    text-decoration:none;
    color:#888;
}
ul.accordion li .description a:hover{
    color:#333;
    text-decoration:underline;
}

Стиль для градиента:

ul.accordion li .bgDescription{
    background:transparent url(../images/bgDescription.png) repeat-x top left;
    height:340px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:none;
} 

JAVASCRIPT

Во-первых, мы включаем библиотеку jQuery перед закрытием тега body:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Теперь добавим функцию, которая заставляет список раздвинуться при наведении на него мыши. Это может быть достигнуто путем увеличение ширины в 480 пикселей. При этом верхний заголовок должен исчезать и его место занимает градиент (CSS класс «bgDescription») с описанием:

<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>

Первая функция внутри «$(‘#accordion > li’).hover» срабатывает при наведении на нее курсора. Вторая функция — когда курсор отводится в сторону. Добавим некоторые временные задержки, чтобы перевод осуществлялся плавно.

Это все! Надеемся, что урок был интересным и полезным! 

Автор - MARY LOU.

Перевод — Дежурка.

Читайте также:

Простой аккордеон для сайта с помощью jQuery

Простой аккордеон для сайта с помощью jQuery

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

 

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

Простой аккордеон для сайта с помощью jQuery

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

Шаг 1. HTML

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<div>

<h3>Заголовок</h3>

<div>

<a href="#">

Текст

<i></i>

</a>

<div>

<p>Текст</p>

</div>

</div>

<div>

<a href="#">

заголовок

<i></i>

</a>

<div>

<p> Текст.</p>

</div>

</div>

<div>

<a href="#">

Заголовок

<i></i>

</a>

</div>

Затем у нас будет класс set который будет обозначать наш один подвид контейнера, в него мы погружаем класс content в котором будет содержаться все описание в аккордеоне.

Простой аккордеон для сайта с помощью jQuery

Шаг 2. CSS

Теперь все это нам необходимо стилизовать, для этого нам понадобиться несколько достаточно простых правил, в которых мы изначально стилизуем контейнер- accordion-container, затем заголовки, которые у нас будут обозначаться h3:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

.accordion-container{

position: relative;

width: 500px;

height: auto;

margin: 20px auto;

}

.accordion-container > h3{

text-align: center;

color: #fff;

padding-bottom: 5px;

margin-bottom: 30px;

border-bottom: 1px solid #ddd;

}

.set{

position: relative;

width: 100%;

height: auto;

background-color: #f5f5f5;

}

.set > a{

display: block;

padding: 10px 15px;

text-decoration: none;

color: #555;

font-weight: 600;

border-bottom: 1px solid #ddd;

-webkit-transition:all 0.2s linear;

-moz-transition:all 0.2s linear;

transition:all 0.2s linear;

}

.set > a i{

position:relative;

float: right;

margin-top:4px;

color: #666;

}

.set > a.active{

background-color:#3399cc;

color: #fff;

}

.set > a.active i{

color: #fff;

}

.content{

position:relative;

width: 100%;

height: auto;

background-color: #fff;

border-bottom: 1px solid #ddd;

display:none;

}

.content p{

padding: 10px 15px;

margin: 0;

color: #333;

}

Затем мы стилизуем сам блок, иконки и содержание нашего аккордеона, обратите внимание, что для класса set у нас будет использоваться активное и пассивное состояние, это позволит нам выделять выбранный нами пункт.

Шаг 3. JS

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

$(document).ready(function(){

$(".set > a").on("click", function(){

if($(this).hasClass('active')){

$(this).removeClass("active");

$(this).siblings('.content').slideUp(200);

$(".set > a i").removeClass("fa-minus").addClass("fa-plus");

}else{

$(".set > a i").removeClass("fa-minus").addClass("fa-plus");

$(this).find("i").removeClass("fa-plus").addClass("fa-minus");

$(".set > a").removeClass("active");

$(this).addClass("active");

$('.content').slideUp(200);

$(this).siblings('.content').slideDown(200);

}

});

});

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

Вот и все. Готово!

Читайте также:

Создание аккордеон-галереи с помощью jQuery

$(document).ready(function() {

       var cwidth = parseInt($("#container").css("width").replace("px", ""));

       var img_count = $("#img_container").children().length;

       var img_width = $("#img1").width();

       var divider = cwidth / img_count;

       var small_space = (cwidth - img_width) / (img_count - 1);

var timer = null;

       var cssleft = Array();

       $("#img_container img").each(function(index) {

// Координаты хранятся в массиве

           cssleft[index] = new Array();

           cssleft[index][0] = (index * divider) - (index * img_width);

           $(this).css("left", cssleft[index][0] + "px");

 

// Вычисляем позицию изображения при наведенном на него курсоре мыши

           cssleft[index][1] = (index * small_space) - (index * img_width);

 

           // Вычисляем координату правого угла изобржаения

           var index2 = index;

           if (index2 == 0) {

               index2++;

           }

           cssleft[index][2] = cssleft[index2 - 1][1];

       });

 

       // Курсор мыши над изображением

       $("#img_container img").mouseenter(function() {

 

if (timer) {

clearTimeout(timer);

timer = null;

}

 

var self = this;

timer = setTimeout(function() {

var img_id = parseInt($(self).attr("id").replace("img", "")) - 1;         if ($(self).attr("id") != "img1") {

$(self).animate({

left: cssleft[img_id][1]

}, 300);

}

loopNext(self);

loopPrev(self);

}, 200)

 

       });

       $("#img_container").mouseleave(function() {

if (timer){

clearTimeout(timer);

timer = null;

}

 

           $("#img_container img").each(function(index) {

               $(this).animate({

                   left: cssleft[index][0]

               }, 300);

           });

       });

 

// Функция для установки изображений, предшествующих активному

       function loopPrev(el) {

           if ($(el).prev().is("img")) {

               var imgprev_id = parseInt($(el).attr("id").replace("img", ""));

 

               if ($(el).prev().attr("id") != "img1") {

                   $(el).prev().animate({

                       left: cssleft[imgprev_id - 2][1]

                   }, 300);

               }

               loopPrev($(el).prev());

           }

       }

 

//Функция установки изображений, следующих за активным

       function loopNext(el) {

           if ($(el).next().is("img")) {

               var imgnext_id = parseInt($(el).attr("id").replace("img", ""));

 

               $(el).next().animate({

                   left: cssleft[imgnext_id][2]

               }, 300);

               loopNext($(el).next());

           }

       }

   });

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *