다시 특정 아이콘을 누르면 이미지가 축소 되는 효과에 대해 알아보도록 하겠습니다
먼저 제이쿼리를 다운받아 놓으셔야 겠죠.
그렇다면 소스를 보면서 설명을 하겠습니다
먼저 body태그를 간단하게 선언해보겠습니다
<body>
<a href="#">크게</a>
<a href="#">작게</a>
<div id="pop"></div>
</body>
body 태그를 선언 하신후 css스타일을 선언해 보겠습니다
<style type="text/css">
#pop{width:200px;height:100px;position:absolute;left:50px;top:50px;background:#993;}
</style>
body 와 css 선언이 끝나셨다면 이제
제이쿼리와 자바스크립트를 활용해 액션을 주겠습니다.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("a:first").click(function(){
$("#pop").clearQueue().animate({height:300,width:800,left:200,top:100})
})
$("a:last").click(function(){
$("#pop").clearQueue().animate({height:100,width:200,left:50,top:50})
})
})
</script>
위의 소스를 모두 합치면
<!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">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#pop{width:200px;height:100px;position:absolute;left:50px;top:50px;background:#993;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("a:first").click(function(){
$("#pop").clearQueue().animate({height:300,width:800,left:200,top:100})
})
$("a:last").click(function(){
$("#pop").clearQueue().animate({height:100,width:200,left:50,top:50})
})
})
</script>
</head>
<body>
<a href="#">크게</a>
<a href="#">작게</a>
<div id="pop"></div>
</body>
</html>
위의 소스를 통해 미리보기를 하면 위의 이미지처럼 작은 박스 하나가 나옵니다.
하지만 크게라는 글자를 눌르면 이미지가 커지는 효과인데요
다시 작게라는 글자를 눌러보면 이미지가 작아지는 효과를 보실수 있을겁니다
이렇게 위의 소스를 활용해 선택자 이름을 잘 바꿔 활용하시면 되겠네요^^
댓글 없음:
댓글 쓰기