728x90
반응형
SMALL
제이쿼리에서 animate는 슬라이드 창같은 느낌을 주기 위해 사용하는데요~ㅎㅎ
또한 자동으로 모양을 움직이게 하기 위해서도 사용됩니다~
여기서 소개할 animate는 크게 두가지 방법으로 사용한 것들인데요~!
자 두가지 소스를 살펴보도록 할까요~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#region{
width : 200px;
height : 200px;
overflow : hidden;
margin : auto;
}
#images{
width : 600px;
height : 200px;
}
#images a img{
width : 200px;
height: 200px;
}
#direction{
width : 360px;
margin : auto;
}
.leftbtn{
margin-top:10px;
}
.rightbtn{
margin-top:10px;
margin-left: 290px;
}
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var i = 0;
$('.leftbtn').bind('click',function(){
if(i==2){
alert('마지막 이미지입니다.');
return;
}
$('#firstimage').animate({marginLeft : '-=205px'},2000);
i++;
});
$('.rightbtn').click(function(){
if(i==0){
alert("첫번째 이미지입니다.");
return;
}
$('#firstimage').animate({marginLeft : '+=205px'},2000);
i--;
});
});
</script>
</head>
<body>
<div id="region">
<div id="images">
<a href="#"><img src="../images/b.jpg" id="firstimage"/></a>
<a href="#"><img src="../images/c.jpg" id="secondimage"/></a>
<a href="#"><img src="../images/d.jpg" id="thirdimage"/></a>
</div>
</div>
<div id="direction">
<button class="leftbtn">«</button>
<button class="rightbtn">»</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
div = $('div');
div.animate({
height : '300px',
opacity : '0.4'
},"slow");
div.animate({
width : '300px',
opacity : '0.8'
}, "slow");
div.animate({
height : '100px',
opacity : '0.4'
}, "slow");
div.animate({
width : '100px',
opacity : '0.8'
}, "slow");
});
});
</script>
</head>
<body>
<button> 버튼 </button> <br><br>
<div style="width:100px; height:100px; background:#123456"></div>
</body>
</html>
첫번째 소스는 슬라이드 느낌을 창을 버튼을 누르면 넘어가는 것이고, 두번째 소스는 버튼을 누르면 div창 안에
사각블럭모양이 자동으로 뜨게 해줍니다~ㅎㅎㅎ
여기까지 제이쿼리 animate에 대한 내용이였는데요~
jquery.js 파일도 꼭 넣어줘야 된다는 것도 잊지 말아야 되겠습니다~ㅎㅎ
728x90
반응형
LIST
'IT 관련,, > 중요문자 적어두기' 카테고리의 다른 글
| [웹/JSP]jsp mvc1게시판 singleton에 대해서 알아봅시다~!! (0) | 2020.08.31 |
|---|---|
| [JSP/서블릿]jsp(spring) 서블릿(Servlet)이란 무엇인가?? (0) | 2020.08.16 |
| [웹/JS]자바스크립트 유효성 검사에 대한 내용 정리~!! (0) | 2020.07.25 |
| [웹/JS]DOM에 대한 내용들~!! (0) | 2020.07.19 |
| [Java/개발]자바 접근제어자(private, public 등)에 대해서 알아보자~!! (0) | 2020.06.28 |