Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Кнопка переключения
Дата добавления: 13.03.2017 - 02:13
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 613
Количество комментариев: 0
Размер файла: 2.8 Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Поделись с друзьями:
Простая функция и вид кнопки для переключения различных двухуровневых режимов. Отлично подойдет, например, для сайтов онлайн кинотеатров, где нужно затемнить фон при просмотре фильма и т.д.
Используйте данную реализацию в своих проектах.
Демонстрация в скачанном файле.
HTML
CSS
JavaScript
Не забудьте подключить библиотеку jQuery если она не подключена у вас
Источник: http://art-ucoz.ru/
Используйте данную реализацию в своих проектах.
Демонстрация в скачанном файле.
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>
<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>
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>
$(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>
Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
Источник: http://art-ucoz.ru/
