반응형
[javascript] scroll top 위로가기 버튼
긴 페이지를 읽고 있을 때, 페이지의 오른쪽 하단에 위를 가리키는 화살표,
또는 top이라고 적혀있는 버튼이 보일 때가 있습니다.
이것을 누르면 맨 위부분으로 이동이 되는 것을 많이 보셨을 텐데요.
이 위로가기 버튼, 즉 scroll top을 부드럽게 위로 이동하게 만드는 부분을 작업해보려합니다.
먼저 </head> 안에 제이쿼리 스크립트를 넣어주세요.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
그 다음, <script> </script> 사이로 스크립트 구문을 넣어주세요.
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
그 다음 CSS에 해당 소스를 넣어주세요. html의 <style></style> 사이로 넣어주셔도 좋습니다.
body {
font: .88em/150% Arial, Helvetica, sans-serif;
margin: 30px auto;
}
h1 {
font: bold 80%/120% Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 0 0 10px;
color: #999;
}
h2 {
font-size: 2.5em;
margin: 0 0 8px;
}
h3 {
font-size: 1.6em;
margin: 20px 0 5px;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F30;
}
p {
margin: 0 0 10px;
}
em {
font: italic 100% "Times New Roman", Times, serif;
}
.credits {
border-bottom: solid 1px #eee;
padding-bottom: 10px;
margin: 0 0 30px;
}
#pagewrap {
margin: 0 auto;
width: 600px;
padding-left: 150px;
position: relative;
}
/*
Back to top button
*/
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
마지막으로 <body>에 id값을 top으로 주시고 예제를 안에 넣어주시면 끝이 납니다.
<div id="pagewrap">
<h1>Demo</h1>
<h2><a href="http://webdesignerwall.com/tutorials/animated-scroll-to-top">Animated Scroll to Top</a></h2>
<p class="credits"><em>by <a href="http://webdesignerwall.com">Web Designer Wall</a></em></p>
<p>↓ scroll down</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p><p>↓</p>
<p>In sollicitudin blandit cursus. Pellentesque ornare, augue ac posuere consectetur, tellus ligula feugiat lorem, id imperdiet tellus tortor ut urna. Ut eleifend rhoncus augue sit amet dignissim. In mattis lobortis imperdiet. Aliquam molestie nisi et purus mattis volutpat. Cras dignissim, arcu vel pretium interdum, turpis sapien rutrum felis, non condimentum nulla orci ornare tellus. In laoreet tristique mauris, in accumsan quam commodo ac. Nam fringilla sapien sed nibh vehicula at rutrum metus blandit. Mauris eleifend, velit eget lacinia ullamcorper, elit sapien malesuada orci, fringilla imperdiet enim ante at velit. Vestibulum posuere dictum sapien, id volutpat sapien auctor non. Fusce convallis elit sagittis augue venenatis tempor in eget ligula. Curabitur at diam leo, eu convallis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin molestie nunc massa. Quisque tempor neque in sem laoreet vel dictum magna commodo. In elementum, turpis sed bibendum sollicitudin, augue leo malesuada dolor, ut hendrerit lectus libero id purus.</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<h3><a href="http://themify.me">Themify.me</a></h3>
<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
<h3><a href="http://icondock.com">IconDock</a></h3>
<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
<h3><a href="http://bestwebgallery.com">Best Web Gallery</a></h3>
<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
<h3><a href="http://ndesign-studio.com">N.Design Studio</a></h3>
<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. </p>
<p>Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
<h3>Sub Heading 5</h3>
<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
<h3>Sub Header 6</h3>
<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. </p>
<p>Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
<h3>Sub Heading 7</h3>
<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
<h3>Sub Header 8</h3>
<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. </p>
<p>Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
<h3>Sub Header 9</h3>
<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. </p>
<p>Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
<h3>Sub Heading 10</h3>
<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
<p id="back-top">
<a href="#top"><span></span>Back to Top</a>
</p>
</div>
출처 : http://webdesignerwall.com/tutorials/animated-scroll-to-top
http://webdesignerwall.com/demo/scroll-to-top/scrolltotop.html (데모페이지)
반응형
'[공부]하는 몽씨 > javascript' 카테고리의 다른 글
| [javascript] select box css 디자인 (0) | 2017.07.19 |
|---|---|
| [javascript] 플로팅배너 만들기 (0) | 2017.06.27 |
| [javascript] selectbox 선택에 따라 두번째 selectbox 값 변화 (3) | 2017.06.22 |
| [javascript] 간단한 탭메뉴 구현하기 (0) | 2017.06.19 |
| [javascript] 심플 이미지 슬라이더 (0) | 2017.06.13 |
반응형
[javascript] selectbox 선택에 따라 두번째 selectbox 값 변화
selectbox의 선택에 따라 두번째 selectbox의 값이 변해야하는 경우가 있습니다.
지역 선택을 해야할 때나 품목 선택을 해야할 때가 그런 경우죠.
이때 사용하게 되는 것이, 해당하는 객체 값이 변할 때 발생하는 이벤트 함수인 onchange라는 함수입니다.
예제를 먼저 살펴볼까요. 먼저 html 부분에 해당 예제소스를 넣어주세요.
<select onchange="categoryChange(this)">
<option>걸그룹을 선택해주세요</option>
<option value="a">블랙핑크</option>
<option value="b">에프엑스</option>
<option value="c">EXID</option>
</select>
<select id="good">
<option>좋아하는 멤버를 선택해주세요</option>
</select>
지극히 개인취향적인 걸그룹이 담긴 selectbox에 내용을 담고 다음에 javascript 스크립트를 넣어주면 완성입니다.
function categoryChange(e) {
var good_a = ["지수", "제니", "로제", "리사"];
var good_b = ["빅토리아", "엠버", "루나", "크리스탈"];
var good_c = ["LE", "하니", "정화", "혜린", "솔지"];
var target = document.getElementById("good");
if(e.value == "a") var d = good_a;
else if(e.value == "b") var d = good_b;
else if(e.value == "c") var d = good_c;
target.options.length = 0;
for (x in d) {
var opt = document.createElement("option");
opt.value = d[x];
opt.innerHTML = d[x];
target.appendChild(opt);
}
}
반응형
'[공부]하는 몽씨 > javascript' 카테고리의 다른 글
| [javascript] select box css 디자인 (0) | 2017.07.19 |
|---|---|
| [javascript] 플로팅배너 만들기 (0) | 2017.06.27 |
| [javascript] scroll top 위로가기 버튼 (0) | 2017.06.23 |
| [javascript] 간단한 탭메뉴 구현하기 (0) | 2017.06.19 |
| [javascript] 심플 이미지 슬라이더 (0) | 2017.06.13 |
반응형
[javascript] 간단한 탭메뉴 구현하기
예전에 보다 간단한 탭메뉴를 찾으려 열심히 구글링했던 때가 있었는데요,
거기서 단비처럼 찾아낸 탭메뉴를 구현해볼까 합니다. 코드도 무척 단순해서 따라하시기 쉬우실거에요.
먼저 CSS에 해당 소스를 넣어주세요. html의 <style></style> 사이로 넣어주셔도 좋습니다.
body{
margin-top: 100px;
font-family: 'Trebuchet MS', serif;
line-height: 1.6
}
.container{
width: 500px;
margin: 0 auto;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: #ededed;
color: #222;
}
.tab-content{
display: none;
background: #ededed;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
그 다음 html에 탭에 넣을 내용들을 적어넣습니다.
ul.tas의 li는 탭을 누를 메뉴가 되고 그 아래, class값이 tab-content인 부분들은 전부 메뉴의 내용들이 됩니다.
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">메뉴_하나</li>
<li class="tab-link" data-tab="tab-2">메뉴_둘</li>
<li class="tab-link" data-tab="tab-3">메뉴_셋</li>
</ul>
<div id="tab-1" class="tab-content current">
---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ----
</div>
<div id="tab-2" class="tab-content">
---- ---- ★------ ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ★-- ---- ---- ------★ ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- ★------ ---- ---- ---- ----
</div>
<div id="tab-3" class="tab-content">
---- ★-- -------- ---- ---- ---- -★- ---- ---- -------- ---- -★- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- --★ -------- ★-- ---- ---- ---- ---- ---- -------- ---- ---- --★ ---- ---- ---- -------- ---- ---- ---- --★
</div>
</div>
마지막으로 javascript에 해당 소스를 넣어주면 끝이 납니다.
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
반응형
'[공부]하는 몽씨 > javascript' 카테고리의 다른 글
| [javascript] select box css 디자인 (0) | 2017.07.19 |
|---|---|
| [javascript] 플로팅배너 만들기 (0) | 2017.06.27 |
| [javascript] scroll top 위로가기 버튼 (0) | 2017.06.23 |
| [javascript] selectbox 선택에 따라 두번째 selectbox 값 변화 (3) | 2017.06.22 |
| [javascript] 심플 이미지 슬라이더 (0) | 2017.06.13 |
반응형
[javascript] 심플 이미지 슬라이더
단순하게 페이드인, 페이드아웃을 반복하면서 이미지를 보여주는 심플 이미지 슬라이더입니다.
이전, 다음 버튼 없이 이미지만 자동으로 움직이죠. 코드도 무척 단순합니다.
먼저 html 부분에 해당 예제소스를 넣어주세요.
(예제 소스에 있는 jpg는 가지고 계시는 이미지로 써주시면 됩니다.)
<div id="slideshow">
<div>
<img src="http://imivory.me/img/noname/1.jpg">
</div>
<div>
<img src="http://imivory.me/img/noname/2.jpg">
</div>
<div>
<img src="http://imivory.me/img/noname/3.jpg">
</div>
</div>
그 다음 CSS에 해당 소스를 넣어주세요. html의 <style></style> 사이로 넣어주셔도 좋습니다.
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
마지막으로 javascript에 해당 소스를 넣어주면 끝이 납니다.
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
예시 페이지는 아래를 참고해주세요.
출처: https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
반응형
'[공부]하는 몽씨 > javascript' 카테고리의 다른 글
| [javascript] select box css 디자인 (0) | 2017.07.19 |
|---|---|
| [javascript] 플로팅배너 만들기 (0) | 2017.06.27 |
| [javascript] scroll top 위로가기 버튼 (0) | 2017.06.23 |
| [javascript] selectbox 선택에 따라 두번째 selectbox 값 변화 (3) | 2017.06.22 |
| [javascript] 간단한 탭메뉴 구현하기 (0) | 2017.06.19 |
