Javascript 16 [ 아코디온 accodion ] 자바스크립트 아코디언 구현하기
https://www.youtube.com/watch?v=T4I5psIHOVA&list=PL-qMANrofLyvzqz2yYzNectJnYo5ZifE7&index=16
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<details>
<summary>HTML</summary>
<p>html</p>
</details>
<details>
<summary>CSS</summary>
<p>css</p>
</details>
<details>
<summary>JAVASCRIPT</summary>
<p>자바스크립트</p>
</details>
<hr>
<div class="container">
<button id="btn-collapse">Collapse All</button>
<h2>FAQ</h2>
<section id="faq">
<div class="panel-question active">
<div class="panel-heading">
+ Lorem ipsum dolor sit?
</div>
<div class="panel-body" id="thisone">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad aliquid voluptate fugit quaerat non molestiae quo magni soluta minima corporis! Soluta, ipsa et.</p>
<p>Quos quibusdam, nesciunt totam ullam quasi neque!</p>
</div>
</div>
<div class="panel-question">
<div class="panel-heading">
+ Lorem ipsum dolor sit?
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad aliquid voluptate fugit quaerat non molestiae quo magni soluta minima corporis! Soluta, ipsa et.</p>
<p>Quos quibusdam, nesciunt totam ullam quasi neque!</p>
</div>
</div>
<div class="panel-question">
<div class="panel-heading">
+ Lorem ipsum dolor sit?
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad aliquid voluptate fugit quaerat non molestiae quo magni soluta minima corporis! Soluta, ipsa et.</p>
<p>Quos quibusdam, nesciunt totam ullam quasi neque!</p>
</div>
</div>
</section>
</div>
<script src="javascript.js"></script>
</body>
</html>css
html, body {
font-family: Helvetica, Arial, sans-serif;
margin: 0;
background-color: #f0f0f0;
}
.container {
width: 90%;
margin: 0 auto;
}
.panel-question {
margin-bottom: 20px;
background-color: #fff;
}
.panel-heading {
font-weight: bold;
padding: 5px;
background-color: #333;
color: #fff;
cursor: pointer;
}
.panel-body {
padding: 15px;
}
#btn-collapse {
margin-bottom: 10px;
background-color: #999;
border: none;
color: #fff;
cursor: pointer;
padding: 5px;
float: right;
}Javascript
let btnCollpase=document.getElementById('btn-collapse'),
heading=document.getElementsByClassName('panel-heading'),
question=document.getElementsByClassName('panel-question'),
answer=document.getElementsByClassName('panel-body');
// 제목을 클릭하면 할 일
for(let i=0;i<heading.length;i++){
heading[i].addEventListener('click',function(ev){
for(let j=0;j<question.length;j++){
question[j].classList.remove('active');
ev.target.parentNode.classList.add('active');
activateBody();
}
});
}
function activateBody () {
for(let x=0;x<answer.length;x++){
answer[x].style.display = 'none';
}
let activePanel = document.querySelector('.panel-question.active .panel-body');
activePanel.style.display='block';
}
activateBody();
btnCollpase.addEventListener('click',function(){
for(let i =0;i<answer.length;i++){
answer[i].style.display='none';
}
})Javascript 17 [ 탭스 tabs ] 자바스크립트 탭스 구현하기, for 반복문, 스타일 변경하기
https://www.youtube.com/watch?v=yPqYMPbgeME&list=PL-qMANrofLyvzqz2yYzNectJnYo5ZifE7&index=18
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tab-wrapper">
<ul class="tab-menu">
<li>
<a href="#tabs-1" class="active">menu1</a>
</li>
<li><a href="#tabs-2">menu2</a></li>
<li><a href="#tabs-3">menu3</a></li>
</ul>
<div id="tab-content">
<div id="tabs-1" class="active">
<h2>Menu 1</h2>
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<h2>Menu 2</h2>
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<h2>Menu 3</h2>
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>css
.tab-wrapper { width:960px; margin:auto;}
.tab-menu {padding-left:0;}
.tab-menu li {float:left; list-style:none; background:#ebebeb; margin-right:10px;}
.tab-menu:after{content:'';display:block; clear:both;}
.tab-menu li a{ color:#999; text-transform:uppercase; font-weight:bold;line-height:27px; text-decoration:none; padding:0 20px; display:block;}
#tab-content > div{display:none;}
.tab-menu li a.active{background: #000; color:#fff;}Javascript
let targetLink = document.querySelectorAll('.tab-menu a');
let tabContent = document.querySelectorAll('#tab-content > div');
for(let i =0;i<targetLink.length;i++){
targetLink[i].addEventListener('click',function(e){
e.preventDefault(); //링크 못하게
let orgTarget = e.target.getAttribute('href');
let tabTarget = orgTarget.replace('#','');
for (let x =0;x<tabContent.length;x++){
tabContent[x].style.display='none';
}
document.getElementById(tabTarget).style.display='block';
for (let j = 0;j<targetLink.length;j++){
targetLink[j].classList.remove('active');
e.target.classList.add('active');
}
});
}
document.getElementById('tabs-1').style.display='block';Javascript 20 [ Lightbox ] 순수 자바스크립트 라이트박스 효과 만들기
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="gallery-container">
<ul class="gallery">
<li><a href="#" alt="Gallery image"><img src="images/image-thumb-1.jpg" data-lightbox="images/image-1.jpg" alt="Gallery image"></a></li>
<li><a href="#" alt="Gallery image"><img src="images/image-thumb-2.jpg" data-lightbox="images/image-2.jpg" alt="Gallery image"></a></li>
<li><a href="#" alt="Gallery image"><img src="images/image-thumb-3.jpg" data-lightbox="images/image-3.jpg" alt="Gallery image"></a></li>
<li><a href="#" alt="Gallery image"><img src="images/image-thumb-4.jpg" data-lightbox="images/image-4.jpg" alt="Gallery image"></a></li>
<li><a href="#" alt="Gallery image"><img src="images/image-thumb-5.jpg" data-lightbox="images/image-5.jpg" alt="Gallery image"></a></li>
<li><a href="#" alt="Gallery image"><img src="images/image-thumb-6.jpg" data-lightbox="images/image-6.jpg" alt="Gallery image"></a></li>
</ul>
</div>
<div id="lightbox-overlay">
<img src="test" alt="Lightbox image" title="Click anywhere to close" id="lightbox-image" />
</div>
<script src="main.js"></script>
</body>
</html>css
* {box-sizing: border-box;padding: 0;margin: 0;}
img {max-width: 100%;height: auto;}
.gallery {margin: 0;padding: 0;list-style: none;}
.gallery li {float: left;width: 48%;margin: 1%;}
.gallery li img {transition: opacity .3s ease-in-out;}
.gallery li img:hover {opacity: .75;}
#lightbox-overlay {opacity: 0;pointer-events: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(29,31,33,0.95);transition: opacity .3s ease-in;}
#lightbox-overlay.visible {opacity: 1;pointer-events: auto;}
#lightbox-image {max-height: 90%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);max-width: 90%;background: transparent url("images/loading.gif") 50% 50% no-repeat;}javascript
document.addEventListener('click',lightbox);
function lightbox(event){
let elem = event.target,
elemId = elem.getAttribute('id'),
lightBoxImg = document.getElementById('lightbox-image'),
lightBox = document.getElementById('lightbox-overlay'),
newImg = new Image();
if(elem.hasAttribute('data-lightbox')){
event.preventDefault();
newImg.onload = function(){
lightBoxImg.src = this.src;
}
newImg.src = elem.getAttribute('data-lightbox');
lightBox.classList.add('visible');
}
if(elemId=='lightbox-overlay'||elemId=='lightbox-image'){
lightBox.classList.remove('visible');
}
}Javascript 21 [ Hover Animation ] 풀스크린 호버 이펙트 애니메이션, css 변수지정 활용하기, es6
https://www.youtube.com/watch?v=4yUZF7CTpiI&list=PL-qMANrofLyvzqz2yYzNectJnYo5ZifE7&index=20
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg"></div>
<div class="container">
<h1>Hover over the links</h1>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will <a data-bg="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/freedom.jpg" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/freedom.jpg" target="_blank">freedom</a> you a account of the system, and expound the actual teachings of the great of the truth, <a data-bg="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/travel.jpg" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/travel.jpg" target='_blank'>travel</a> master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is, but <a data-bg="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/explore.jpg" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/explore.jpg" target="_blank">explore</a> those who do not know how to pursue pleasure rationally encounter consequences that are <a data-bg="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/holiday.jpg" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/holiday.jpg" target="_blank">holidays</a> painful.
</div>
<script src="main.js"></script>
</body>
</html>css
/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--red: firebrick;--white: white;}
* {padding: 0;margin: 0;}
a {color: inherit;text-decoration: none;}
body {font: 22px/1.5 sans-serif;}
h1 {text-align: center;margin: 20px 0;}
/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {max-width: 800px;margin: 0 auto;width: 100%;}
.container a {border-bottom: 2px dashed var(--red);position: relative;}
.container a::before {content: "";position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;min-width: 30px;transform: translate(-50%,-50%) scaleX(0);padding: 10px;z-index: -1;transform-origin: 50% 50%;background: var(--white);}
.bg {position: absolute;left: 0;top: 0;right: 0;bottom: 0;opacity: 0;background-repeat: no-repeat;background-position: center; background-size: cover; transition: all .3s ease-out;}
.bg-show .bg {opacity: 1;z-index: 1;}
.container a:hover{z-index: 2;border-bottom-color:transparent; color: var(--red); }
.container a:hover:before{transform:translate(-50%,-50%) scaleX(1); }javascript
const links = document.querySelectorAll('.container a');
const bg = document.querySelector('.bg');
const showClass = 'bg-show';
for(const link of links){
const img = new Image();
img.src = link.dataset.bg;
console.log(img);
link.addEventListener('mouseenter',function(){
bg.style.backgroundImage = `url(${this.dataset.bg})`;
document.body.classList.add(showClass);
});
link.addEventListener('mouseleave',function(){
document.body.classList.remove(showClass);
});
}Javascript 22 [ Cookie ] 쿠키활용 팝업 제어하기, 첫 방문자에게만 팝업 띄우기
https://www.youtube.com/watch?v=XtzoyhirKcQ&list=PL-qMANrofLyvzqz2yYzNectJnYo5ZifE7&index=21&t=76s
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.notice {position: fixed;padding: 20px;border: 1px solid #ccc;top: 100px;left: 100px;}
</style>
<title>Mill</title>
</head>
<body>
<div class="notice">Notice</div>
<button onclick="deleteCookie();">쿠키 지우기</button>
<script>
console.log(document.cookie);
let currentCookie = document.cookie;
let cookieCheck = document.cookie.indexOf('Mill');
console.log(cookieCheck);
if(cookieCheck>-1){
document.querySelector('.notice').style.display='none';
} else {
document.querySelector('.notice').style.display='block';
}
// 쿠키 생성하기
let date = new Date();
date.setDate(date.getDate()+7);
console.log(date);
let setCookie = '';
setCookie+='CookieName = Mill;';
setCookie+='expires = ' + date.toUTCString();
// console.log(setCookie);
document.cookie = setCookie;
// 쿠키 지우기
function deleteCookie(){
let date = new Date();
date.setDate(date.getDate()-1);
console.log(date);
let setCookie = '';
setCookie+='CookieName = Mill;';
setCookie+='expires = ' + date.toUTCString();
// console.log(setCookie);
document.cookie = setCookie;
}
</script>
</body>
</html>Javascript 24 [ Slideshow ] 순수 자바스크립트 슬라이드 업그레이드하기 part 1, 좌우 컨트롤 구현하기
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul class="slider-container simple-list" id="slider">
<li class="slide">
<blockquote>
"1이것은 옷뿐이 아니고 다른 물건들도 마찬가지다. 브랜드 옷이라고 다 좋은 것도 아니고, 중저가 옷이라고 브랜드 제품보다 떨어지는 옷만 있는 것도 아니다. 브랜드냐 아니냐가 중요한 것이 아니라, 나에게 잘 어울리는 옷을 실속 있게 구입해서 입어야 한다."
</blockquote>
<cite>- "사람들이 옷을 살 때 브랜드를 중요하게 여기는 사람이 있고, 가성비를 우선시 하는 사람이 있다."</cite>
</li>
<li class="slide">
<blockquote>
"2이런 실험도 있다. 나라는 사람은 변함이 없는데 옷차림이 연봉과 직업을 바꾸어 놓는다. 내 연봉이 3000만원인데 옷차림이 바뀌면 사람들은 나의 연봉을 1억으로 보기도 한다. 번듯한 직업이 있는 대도 옷차림에 따라서 실업자로 보기도 한다. 옷의 힘이란 그런 것이다. 이런 까닭에 사람들은 자신이 입는 옷에 가치를 상당히 부여한다. 옷에 그만큼 신경을 쓴다는 얘기다. 남자보다는 상대적으로 여자가 신경을 더 많이 쓴다. 계절마다 옷을 바꾸어 입어야 하는 우리나라 현실도 한몫한다."
</blockquote>
<cite>- "어떤 옷차림이냐에 따라서 나의 평가가 달라진다."</cite>
</li>
<li class="slide">
<blockquote>
"3이런 실험도 있다. 나라는 사람은 변함이 없는데 옷차림이 연봉과 직업을 바꾸어 놓는다. 내 연봉이 3000만원인데 옷차림이 바뀌면 사람들은 나의 연봉을 1억으로 보기도 한다. 번듯한 직업이 있는 대도 옷차림에 따라서 실업자로 보기도 한다. 옷의 힘이란 그런 것이다. 이런 까닭에 사람들은 자신이 입는 옷에 가치를 상당히 부여한다. 옷에 그만큼 신경을 쓴다는 얘기다. 남자보다는 상대적으로 여자가 신경을 더 많이 쓴다. 계절마다 옷을 바꾸어 입어야 하는 우리나라 현실도 한몫한다."
</blockquote>
<cite>- "어떤 옷차림이냐에 따라서 나의 평가가 달라진다."</cite>
</li>
<li class="slide">
<blockquote>
"4남자들이 자동차나 시계에 들이는 관심과 비용에 견줄만하다. 남자 옷을 10만원 주고 살 수 있다고 하면, 여자는 30, 40만 원 이상은 줘야 한다. 여자 속옷 한 벌도 일반적으로 선호하는 브랜드는 10만원이 훌쩍 넘어간다. 남자 속옷에 비해서 서너 배는 비싼 편이다. 겉옷이든 속옷이든 이보다 몇 배 비싼 옷도 상상을 초월해서 팔리기도 한다. 그래서 여자들의 눈에는 남자들이 못 보는 ‘브랜드가 보인다.’는 말도 한다."
</blockquote>
<cite>- "여자가 사회생활을 할 때 옷값, 화장품 값 등의 사회적 비용이 만만치 않다."</cite>
</li>
<li class="slide">
<blockquote>
"5유행에 뒤떨어진 옷을 입었다고 생각해 본 적도 있다. 아니면 반대로, 다른 사람이 당신 옷차림을 보면서 옷이 잘 어울린다는 소리를 들어본 적도 있다. 좀 더 구체적으로 옷을 우아하고 세련되게 입는다는 소리를 들어본 적도 있을 것이다."
</blockquote>
<cite>- "여러분은 다른 사람이 입은 옷을 보면서 옷차림이 안 어울린다고 생각해 본 적이 있을 것이다."</cite>
</li>
<li class="slide">
<blockquote>
"6하지만 ‘NO’가 있다. 예를 들면 초혼이든 재혼이든 결혼 전에 이런 경우가 있다. 남녀가 데이트를 할 때, 또는 집 앞에서 잠깐 만나는 경우다. 이때 남자친구가 추리닝을 입고 나온다. 트레이닝복 입고 온 남자친구를 어느 여자 친구가 좋아하겠는가."
</blockquote>
<cite>- "옷 스타일에는 분명히 개인차가 존재한다."</cite>
</li>
</ul>
<a href="#" id="prev"></a>
<a href="#" id="next"></a>
</div> <!-- end container -->
<script src="script.js"></script>
</body>
</html>css
/* General styles */
* {box-sizing: border-box;-webkit-font-smoothing:antialised;}
body {margin-top: 5em; font: 22px/1.5 "Helvetica", Arial, sans-serif;}
.container {position: relative;width: 100%;overflow: hidden;}
.slider-container {position: absolute;width: 100%;}
.slide {position: absolute;width: 100%;padding: 0 10%;box-sizing: border-box;top: 50%;transform: translateY(-50%);text-align: center;overflow: hidden;}
.slider-container.animated {-webkit-transition: left .3s ease-in;transition: left .3s ease-in;}
blockquote {color: #636363;font-weight: 300;font-style: italic;margin-bottom: 1.5em;}
cite {font-style: 0.75em;font-weight: 700;font-style: normal;}
/* Utility */
.simple-list {list-style-type: none;margin: 0;padding: 0;}
/* Nav */
#prev, #next {position: absolute;top: 50%;transform: translateY(-50%);z-index: 999999;display: inline-block;height: 5em;width: 5em;border-radius: 50%;background-position: center center;background-repeat: no-repeat;-webkit-transition: all .3s ease-in;transition: all .3s ease-in;}
#prev.disabled, #next.disabled {display: none;}
#prev {background-image: url('images/arrow-left-out.svg');margin-left: 380px;}
#prev:hover {background-image: url('images/arrow-left-over.svg');}
#next {margin-left: 1000px;background-image: url('images/arrow-right-out.svg');}
#next:hover {background-image: url('images/arrow-right-over.svg');}javascript
// 변수 지정
let $slideWrap = document.querySelector('.container'),
$slideContainer = document.querySelector('.slider-container'),
$slide = document.querySelectorAll('.slide'),
$navPrev = document.getElementById('prev'),
$slideHeight = 0,
$slideCount =$slide.length,
$currentIndex = 0,
$navNext = document.getElementById('next');
// 슬라이드의 높이 확인하여 부모의 높이로 지정하기 - 대상.offsetHeight
for(var i=0;i<$slideCount;i++){
if($slideHeight < $slide[i].offsetHeight){
$slideHeight = $slide[i].offsetHeight;
}
}
$slideWrap.style.height=$slideHeight+'px';
$slideContainer.style.height=$slideHeight+'px';
// 슬라이드가 있으면 가로로 배열하기
for(var a = 0;a < $slideCount;a++){
$slide[a].style.left = a*100 + '%';
}
// 슬라이드 이동 함수
function goToSlide(idx){
$slideContainer.style.left = -100 * idx + '%';
$slideContainer.classList.add('animated');
$currentIndex=idx;
}
// 버튼기능 업데이트 함수
// 버튼을 클릭하면 슬라이드 이동시키기
// 다음버튼을 클릭하면 할 일, 이전 버튼을 클릭하면 할 일.
$navPrev.addEventListener('click',function(){
// goToSlide($currentIndex-1);
if($currentIndex==0){
// $navPrev.classList.add('disabled');
goToSlide($slideCount-1);
} else {
// $navPrev.classList.remove('disabled');
goToSlide($currentIndex-1);
}
});
$navNext.addEventListener('click',function(){
// goToSlide($currentIndex+1);
if($currentIndex==$slideCount-1){
// $navNext.classList.add('disabled');
goToSlide(0);
} else {
// $navNext.classList.remove('disabled');
goToSlide($currentIndex+1);
}
});jQuery 80 javascript 25 [ Scroll Menu ] 순수 자바스크립트와 제이쿼리 비교 - 스크롤 메뉴 구현하기
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>scroll_menu</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="js/scroll_menu.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header id="top_menu">
<div class="container">
<h1 id="logo">
<a href="#home">ABC</a>
</h1>
<ul>
<li class="on"><a href="#section1">section 1</a></li>
<li><a href="#section2">section 2</a></li>
<li><a href="#section3">section 3</a></li>
</ul>
</div>
</header>
<main id="contents">
<section id="section1">
<div class="container">
<h2>section 1</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore assumenda quos ut alias qui. Ad laudantium fuga quasi consectetur nihil voluptates quidem amet. Maiores, obcaecati porro expedita asperiores earum corporis!
</p>
</div>
</section>
<section id="section2">
<div class="container">
<h2>section 2</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore assumenda quos ut alias qui. Ad laudantium fuga quasi consectetur nihil voluptates quidem amet. Maiores, obcaecati porro expedita asperiores earum corporis!
</p>
</div>
</section>
<section id="section3">
<div class="container">
<h2>section 3</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore assumenda quos ut alias qui. Ad laudantium fuga quasi consectetur nihil voluptates quidem amet. Maiores, obcaecati porro expedita asperiores earum corporis!
</p>
</div>
</section>
</main>
</body>
</html>css
* { margin:0; padding:0; }
body { background: #545454; }
#top_menu { position: fixed; height:114px; left:0; right:0; top:0px; background: #545454; }
.container{ width: 1170px; margin:0 auto;}
#logo a{text-decoration: none; color: #fff;}
#top_menu ul {float:right; margin-right:33px;}
#top_menu ul li { padding:59px 0px 0px 63px; float:left; list-style: none; color: #CCCCCC; }
#top_menu ul li a { color:#fff; text-decoration:none; }
#top_menu ul li.on a { color:#000; font-weight:bold; }
#logo {float:left; width:125px; padding-top:40px; color:#FFFFFF;}
#contents > section {padding:104px 0; height:100vh; }
#contents > section h2{ margin-top: 50px; font-size: 3em; color: #FFF;}
#section1 {background:#00BAFF;}
#section2 {background:#CCCCCC;}
#section3 {background:#FFE200; }jQuery
$(function(){
//변수지정
var $menu = $('#top_menu ul li');
var $contents = $('#contents > section');
//메뉴 클릭 이동
$menu.click(function(e){
e.preventDefault();
var idx = $(this).index();
var tt = $contents.eq(idx).offset().top;
//스크롤 이동 반영하기
$('html, body').animate({scrollTop:tt});
});
//윈도우에 스크롤이 생기면 할 일
$(window).scroll(function(){
//현재 스크롤양을 변수명 $sct 저장한다.
var $sct = $(this).scrollTop();
$contents.each(function(i){
var tg = $(this);
if(tg.offset().top -10 < $sct){
$menu.removeClass('on');
$menu.eq(i).addClass('on');
}
});
});
});'컴퓨터 > Javascript' 카테고리의 다른 글
| jQuery (0) | 2021.12.23 |
|---|---|
| javascript 그림슬라이드 (0) | 2021.12.21 |
| javascript function 여러개 인수 합 (0) | 2021.09.26 |
| JavaScript (0) | 2021.09.04 |
| javascript 함수 여러개의 인수전달 (0) | 2020.11.11 |