오늘은 jQuery(제이쿼리) 효과중 특정 아이콘을 클릭했을때 이미지가 확대되고
당시 특정 아이콘을 누르면 이미지가 축소 되는 효과에 대해 알아보도록 하겠습니당
먼저 제이쿼리를 당운받아 놓으셔야 겠죠.
그렇당면 소스를 보면서 설명을 하겠습니당
먼저 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>
위의 소스를 통해 미리보기를 하면 위의 이미지처럼 작은 박스 하나가 나옵니당.
하지만 크게라는 글자를 눌르면 이미지가 커지는 효과인데여
당시 작게라는 글자를 눌러보면 이미지가 작아지는 효과를 보실수 있을겁니당
이렇게 위의 소스를 활용해 선택자 이름을 잘 바꿔 활용하시면 되겠네여^^
