안녕하세요
오늘은 토글버튼으로 웹 배경을 바꾸는 기능을 만들어 보겠습니다.
*결과
1. label 태그
<div class="toggle-box">
<input type="checkbox" name="checkbox1" id="toggle-box-checkbox" />
<label for="toggle-box-checkbox" class="toggle-box-label-left"></label>
<label for="toggle-box-checkbox" class="toggle-box-label"></label>
</div><label> 태그는 <input> 태그를 도와주는 역할입니다. label 태그에 연결된 요소에 바로 영향을 주기 때문에 버튼 편의성을 높여줍니다.
input 태그의 id 값과 label 태그의 for 값을 일치시켜 연결해줍니다.
2. 클래서 제어
$('#toggle-box-checkbox').on('change', function(){
if(this.checked){
$('body').addClass('night');
}else{
$('body').removeClass('night');
}
});- 추가 : addClass
$( 'h1' ).addClass( 'abc' );- 제거 : removeClass
$( 'h1' ).removeClass( 'abc' );- 교체 : switchClass
$().switchClass('oldClass','newClass');- 새로 지정 : attr
$('#element').attr('class','newClass');- 포함 여부 확인 : hasClass
$('#element').hasClass('class1');3. setInterval 함수
일정한 시간 간격으로 작업을 수행하고 싶을 때 사용합니다.
*참고
setInterval 함수를 중지 하고 싶을 때는 clearInterval 함수를 사용합니다.
4. 전체코드
<!doctype html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>토글 버튼으로 배경 바꾸기</title>
<style>
html,
body {
min-height: 100%;
}
body {
padding: 20px;
background-image: linear-gradient(to bottom, #FFFFFF 30%, #88D9FF, #24206C, #222 80%);
color: #333;
background-size: 100% 400%;
background-position: 100% 0%;
transition: all 1s;
}
body.night {
background-position: 100% 100%;
color: #fff;
}
.toggle-box-label-left:empty {
margin-left: -10px;
}
.toggle-box-label-left:before,
.toggle-box-label-left:after {
box-sizing: border-box;
margin: 0;
padding: 0;
/*transition*/
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
outline: none;
}
.toggle-box input[type=checkbox],
.toggle-box input[type=checkbox]:active {
position: absolute;
top: -5000px;
height: 0;
width: 0;
opacity: 0;
border: none;
outline: none;
}
.toggle-box label {
display: inline-block;
position: relative;
padding: 0px;
margin-bottom: 20px;
font-size: 14px;
line-height: 16px;
cursor: pointer;
color: rgba(149, 149, 149, 0.51);
font-weight: normal;
}
.toggle-box-label-left:before {
content: '';
display: block;
position: absolute;
z-index: 1;
line-height: 34px;
text-indent: 40px;
height: 16px;
width: 16px;
margin: 4px;
/*border-radius*/
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
right: 26px;
bottom: 0px;
background: #FFB200;
transform: rotate(-45deg);
box-shadow: 0 0 10px white;
}
.toggle-box-label-left:after {
content: "";
display: inline-block;
width: 40px;
height: 24px;
/*border-radius*/
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.15);
vertical-align: middle;
margin: 0 10px;
border: 2px solid #FFB200;
}
.toggle-box input[type=checkbox]:checked + .toggle-box-label-left:before {
right: 17px;
box-shadow: 5px 5px 0 0 #eee;
background: transparent;
}
.toggle-box input[type=checkbox]:checked + .toggle-box-label-left:after {
background: rgba(0, 0, 0, 0.15);
border: 2px solid white;
}
.toggle-box input[type=checkbox] + .toggle-box-label-left {
color: rgba(250, 250, 250, 0.51);
font-weight: bold;
}
.toggle-box input[type=checkbox]:checked + .toggle-box-label-left {
color: rgba(149, 149, 149, 0.51);
font-weight: normal;
}
.toggle-box input[type=checkbox]:checked + .toggle-box-label-left + .toggle-box-label {
color: rgba(250, 250, 250, 0.51);
font-weight: bold;
}
</style>
</head>
<body>
<br/>
<div class="toggle-box">
<input type="checkbox" name="checkbox1" id="toggle-box-checkbox" />
<label for="toggle-box-checkbox" class="toggle-box-label-left"></label>
<label for="toggle-box-checkbox" class="toggle-box-label"></label>
</div>
<h4>Day/night switch</h4>
<h5>Click the switch to change between daytime and nighttime reading</h5>
<hr/>
<div class="hipsum"><p>Everyday carry forage chicharrones scenester paleo viral, gastropub ugh pop-up semiotics chambray yr truffaut godard. Church-key venmo chicharrones helvetica hashtag keytar. Sartorial occupy bushwick, XOXO keytar slow-carb leggings brunch actually literally godard offal aesthetic. Squid 8-bit portland knausgaard +1 man bun before they sold out hashtag, photo booth chambray VHS banh mi. Lo-fi disrupt asymmetrical squid kinfolk knausgaard +1 leggings organic vegan. Viral gastropub sustainable, small batch heirloom swag knausgaard skateboard distillery locavore salvia letterpress humblebrag. Sustainable thundercats pug humblebrag, vice direct trade hella.</p><p>Forage whatever offal, kombucha salvia food truck cornhole organic blue bottle tousled crucifix lomo. Bushwick ethical slow-carb green juice, irony cold-pressed you probably haven't heard of them thundercats cred scenester brooklyn bitters schlitz tumblr. XOXO 90's man bun kogi trust fund church-key. Kale chips everyday carry kickstarter keffiyeh synth migas. Kickstarter cold-pressed pop-up, chartreuse master cleanse shoreditch hoodie. Squid yr lo-fi art party trust fund bespoke. Pickled brunch shoreditch kale chips sriracha kickstarter occupy deep v, selvage yuccie fingerstache food truck godard.</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('#toggle-box-checkbox').on('change', function(){
if(this.checked){
$('body').addClass('night');
}else{
$('body').removeClass('night');
}
});
// run demo if in searchresult preview
function demo(){
setInterval(function(){
$("#toggle-box-checkbox").trigger('click');
}, 1000);
}
if (document.location.pathname.indexOf('fullcpgrid')>-1){
demo();
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [Javascript] filter 함수 사용하기 (0) | 2022.06.21 |
|---|---|
| [JavaScript] Full-calendar 사용하기 (0) | 2022.06.16 |
| [Javascript] 버튼클릭으로 팝업창 만들기 (0) | 2022.06.08 |
| [Javascript] 스크롤에 따른 웹페이지 배경색 변경하기 (0) | 2022.05.27 |
| [Javascript] 무지개 터널 효과 만들기 (0) | 2022.05.15 |
