Интернет магазин шабонов
Форма входа

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

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

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

Дата добавления: 13.03.2017 - 02:13
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 147
Количество комментариев: 0
Размер файла: 2.8Kb
Рейтинг материала: 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/
Добавлять комментарии могут только зарегистрированные пользователи.