Форма входа

    Бесплатный раздел

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Кнопка переключения

    Дата добавления: 13.03.2017 - 02:13
    Категория: Кнопки / иконки
    Добавил: Buger
    Количество просмотров: 1.5k
    Количество комментариев: 0
    Размер файла: 2.8 Kb
    Рейтинг материала: 0.0 / 0
    Кнопка переключения
    БЕСПЛАТНО
    рейтинг 0.0
    /
    голосов 0
    Простая функция и вид кнопки для переключения различных двухуровневых режимов. Отлично подойдет, например, для сайтов онлайн кинотеатров, где нужно затемнить фон при просмотре фильма и т.д.
    Используйте данную реализацию в своих проектах.

    Демонстрация в скачанном файле.

    HTML
    Код
    <label class="button-toggle-wrap">
      <h1 class="my-text">Моя жизнь прекрасна, потому что...</h1>
      <input class="toggler" type="checkbox" data-toggle="button-toggle" />
      <div class="button-toggle">
      <div class="handle">
      <div class="bars"></div>
      </div>
      </div>
    </label>


    CSS
    Код
    <style type="text/css">
      h1 {
      font-weight: 300;
      }
       
      .text-red {
      color: #f07464;
      }
       
      .button-toggle-wrap {
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      }
       
      .button-toggle {
      display: inline-block;
      background: #bbbbbb;
      border-radius: 3px;
      height: 48px;
      padding: 4px;
      width: 101px;
      position: relative;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22);
      }
       
      .button-toggle .handle {
      position: absolute;
      left: 4px;
      right: auto;
      width: 40px;
      height: 40px;
      background: #fff;
      border-radius: 3px;
      -webkit-transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);
      transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
      }
       
      .toggler {
      display: none;
      }
       
      .toggler:checked + .button-toggle {
      background: #f07464;
      }
       
      .toggler:checked + .button-toggle .handle {
      left: 57px;
      }
    </style>


    JavaScript
    Код
    <script>
      $(function () {
      $("[data-toggle]").click(function () {
      var target = $(".my-text");
      if ($(this).prop('checked')) {
      target.html('Ты моя жизнь <span class="text-red"><3</span>');
      } else {
      target.html('Моя жизнь прекрасна, потому что...');
      }
      })
      })
    </script>

    Не забудьте подключить библиотеку jQuery если она не подключена у вас
    Код
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>


    Источник: http://art-ucoz.ru/
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: