티스토리 뷰

java,web study/7주차 (8월 12일~8월 18일)

텍스트박스 슬라이드 애니메이션

doublemetal 2013. 8. 13. 13:02
example

Lorem inpsum dolor sit amet

Lorem inpsum dolor sit amet, consectetur

Proin in urna turpis.

Lorem ipsum dolor sit amet, consectetur

Duis malesuada lorem neque.

Lorem ipsum dolor sit amet, consectetur


<!-- 방향키로 슬라이드/슬라이드무한루프 -->
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>example</title>

<style>
div.item:nth-child(1) {
background: blueviolet;
}

div.item:nth-child(2) {
background: pink;
}

div.item:nth-child(3) {
background: burlywood;
}
</style>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>
$(document).ready(function() {

//변수선언
var width = $('[data-role="slider"]').attr('data-width');
var height = $('[data-role="slider"]').attr('data-height');
var count = $('[data-role="slider"] div.item').length;

//스타일 적용
$('[data-role="slider"]').css({
position : 'relative',
overflow : 'hidden',
width : width,
height : height
}).find('.container').css({
position : 'absolute',
width : count * width,
overflow : 'hidden'
}).find('.item').css({
width : width,
height : height,
float : 'left'
});

//변수 선언
var currentPage = 0;
var changePage = function() {
$('[data-role="slider"] > .container').animate({
left : -currentPage * width
}, 500);
};

//이벤트를 연결합니다.
$('#left-button').click(function() {
if (currentPage > 0) {
//왼쪽으로 이동
currentPage = currentPage - 1;
changePage();
} else {
currentPage = count - 1;
changePage();
}
});

$('#right-button').click(function() {
if (currentPage < count - 1) {
//오른쪽으로 이동
currentPage = currentPage + 1;
changePage();
} else {
currentPage = 0;
changePage();
}
});
window.onload = function() {
window.onkeydown = function(event) {

if (event.keyCode == 37) {
if (currentPage > 0) {
//왼쪽으로 이동
currentPage = currentPage - 1;
changePage();
} else {
currentPage = count - 1;
changePage();
}
} else if (event.keyCode == 39) {
if (currentPage < count - 1) {
//오른쪽으로 이동
currentPage = currentPage + 1;
changePage();
} else {
currentPage = 0;
changePage();
}
}
};
};
});
</script>
</head>
<body>

<div data-role="slider" data-width="500" data-height="300">

<div class="container">
<div class="item">

<h1>Lorem inpsum dolor sit amet</h1>
<p>Lorem inpsum dolor sit amet, consectetur</p>

</div>

<div class="item">

<h1>Proin in urna turpis.</h1>
<p>Lorem ipsum dolor sit amet, consectetur</p>

</div>

<div class="item">

<h1>Duis malesuada lorem neque.</h1>
<p>Lorem ipsum dolor sit amet, consectetur</p>

</div>
</div>
</div>
<button id="left-button"><</button>
<button id="right-button">></button>
</body>
</html>


'java,web study > 7주차 (8월 12일~8월 18일)' 카테고리의 다른 글

반응형웹사이트 - 고양이사이트  (0) 2013.08.13
CSS/JQuery - 툴팁 페이드인/페이드아웃 해보기  (0) 2013.08.13
JQuery - 움직이는 애니메이션 그리기  (0) 2013.08.12
JQuery - 이미지 애니메이션(스탑버튼)  (0) 2013.08.12
JQuery - 이벤트 실행방지하기  (0) 2013.08.12
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함