Скользящая нижняя панель через HTML, CSS, JS, нажав на карту / плитку

0

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

Сценарий: как показано на скриншоте макета >> Карты будут отображаться на главном экране >> пользователи нажимают на один из Карт >> фон должен быть прозрачным на 50%, а детали фильма должны отображаться в скользящей панели кнопок >> PLAY NOW should быть активным

Как и загрузка левого меню в данном шаблоне ниже - шаблон playdo

один из подобных примеров я нашел, но, как я уже упоминал, это функция зависания - Сдвижная нижняя панель через HTML, CSS и JS

Другой из верхнего скользящего - http://hoveralls.design-way.ro/

Шаблон на скриншоте, который я использую, - https://github.com/tomclaus/playdo

Теги:

2 ответа

0
Лучший ответ

Привет и добро пожаловать в внешний мир.

Вам нужно создать два разных класса css, которые содержат вещи, которые вы хотите изменить (в этом случае верх и прозрачность). Один из них, когда ваша карта/плитка "сведена к минимуму" и одна для "максимизирована".

.minimized{
    background-color: rgba(255,255,255, 0.5);
    top: 90%;
}

.maximized{
    background-color: rgba(255,255,255, 1);
    top: 75%;
}

а затем примените событие click к вашей карте/названию, используя jQuery или Javascript, и замените эти классы, чтобы дать правильное поведение.

$("#card").click(function(){
    if($(this).hasClass('minimized')){

        $(this).removeClass('minimized');
        $(this).addClass('maximized');
    }
    else{

        $(this).removeClass('maximized');
        $(this).addClass('minimized');
    }
});

Убедитесь, что CSS для вашей карты/плитки включает в себя следующее:

-webkit-transition: all ease 1s;

Эта линия даст плавный переход, когда вы замените минимизированные и максимизированные классы.

Пожалуйста, проверьте этот jsfiddle, чтобы увидеть код в действии.

пс. Поскольку я использую префикс "-webkit-" для перехода, этот пример будет работать только с браузерами webkit (сафари и хром)

Поделиться
  • 0
    Гэри - твой пример выглядит хорошо, но я пытаюсь это сделать. У меня есть карточки на домашнем экране, и когда я нажимаю на одну из них, она переносит меня на новую страницу, и я думаю сделать вместо новой страницы скользящую кнопку вверх и отобразить на ней данные карточки, сделав домашнюю страницу прозрачной на 50% с серый цвет. Экран макета - docs.google.com/file/d/0B6laW1_sl3NrSTyJIMkZrUTRtSlU/…
  • 0
    Хорошо, я думаю, что получаю, но ссылка на экран макета не работает, пожалуйста, исправьте это, чтобы я мог лучше понять, чего вы пытаетесь достичь.
Показать ещё 4 комментария
0

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

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

Минимизирован и Максимизирован для div, в котором содержатся детали фильма.

#details{
    z-index: 4;
    position: absolute;
    -webkit-transition: all ease 1s;
    background-color: #2980b9;

    color: white;
    padding: 30px;
    width: 100%;
    height: 300px;    
}

.minimized{
    top: 100%;
}

.maximized{
    top: 40%;
}

И еще два для "серого халата", который сидит на вершине карт, когда детали отображаются.

#courtain{
     position:absolute;
     background-color: rgba(100,100,100, 0.5);
     width: 100%;
     height: 100%;
}

.active{
    z-index: 2;
}

.deactive{
    z-index: -1;
}

Все это должно контролироваться или переключаться с помощью Javascript с событием клика для Карты.

function hideAndShow(){
    var details = $('#details');
    var courtain = $('#courtain');

    if(details.hasClass('minimized')){
        courtain.removeClass('deactive');
        courtain.addClass('active');
        details.removeClass('minimized');
        details.addClass('maximized');
    }
    else{
        courtain.removeClass('active');
        courtain.addClass('deactive');
        details.removeClass('maximized');
        details.addClass('minimized');
    }
}

Важно проверить значения "z-index" на состояниях, чтобы правильно их разместить над другим, тот, который имеет наибольшее значение z-индекса, остается тем, что остается на вершине.

Я обновил JSFiddle, проверьте его и, надеюсь, все это делает смысл.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню