animate(이동, 효과)
css 위치 속성값을 바꾸면서 효과 넣기
show, hide, slideUp, slideDown 같은 기능들도 animate를 통해서 표현가능
길이를 넓혀도 가능(지역변수로 길이 가변 설정)
효과 적용된 화면
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>animate()</title>
<style>
#panel{
border:1px #000000 solid;
width:820px;
height:220px;
text-align:center;
position:relative;
margin-bottom:10px;
}
#imgWrap{
width:220px;
height:220px;
position:absolute; left:0px; top:0px;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<script>
var $imgWrap;
$(document).ready(function(){
$imgWrap = $("#imgWrap");
$("#btn_Start").bind("click", onMoving);
});
function onMoving(){
// 이동할 값을 알기위해서 아래 지역변수 leftPosition 생성
var leftPosition = $("#panel").innerWidth() - $imgWrap.outerWidth();
// 여러번 클릭했을시 이벤트 중복시 중지해라.
$imgWrap.stop();
// 최초 설정시 0위치로 해두기
$imgWrap.css({"left":0, "opacity":1});
// 함수 설명
// animate({바꿔줄 속성명:속성값, 바꿔줄 속성명:속성값, ..... }, 속도, 효과방식, 끝난 다음발생할 임의함수{} )
$imgWrap.animate({"left":leftPosition, "opacity":0}, 1000, "easeOutExpo", function(){
$imgWrap.css({"left":0, "opacity":1});
} );
}
</script>
</head>
<body>
<div id="panel">
<div id="imgWrap">
<img id="img_1" src="images/img1.jpg">
</div>
</div>
<div>
<button id="btn_Start">시작</button>
</div>
</body>
</html>
이미지 슬라이더 직접 만들기(setInterval, animate 활용하기)
전제
div 아래에 이미지가 있음.
이미지가 보일 화면의 넓이
논리 재정리
1. 모든 이미지들을 보이는 창 "#banner_container" 아래에 놓아두기
2. 첫번째 이미지만 보이는 창 "#banner_container" 에 놓아두기
3. 현재 이미지를 올려주면서(top), 투명도 조절(opacity)
4. 다음 이미지를 따라서 올렺기(top), 투명도 조절(opacity)
5. 현재 이미지의 위치만 다시 아래로 내려주기
6. 현재변수, 다음변수 숫자를 바꿔주기. 만약 4를 넘었으면 초기화 해주기
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>imgSlide</title>
<style>
body{
background:url(images/index_back.gif)
}
#banner_container{
position:relative;
width:800px;
height:380px;
border:1px solid #cccccc;
top:100px;
left:100px;
overflow:hidden;
}
#banner_container div{
position:absolute;
width:800px;
height:380px;
top:0;
background:#ffffff;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<script type="text/javascript">
// 논리 재정리
/*
* 1. 모든 이미지들을 보이는 창 "#banner_container" 아래에 놓아두기
* 2. 첫번째 이미지만 보이는 창 "#banner_container" 에 놓아두기
* 3. 현재 이미지를 올려주면서(top), 투명도 조절(opacity)
* 4. 다음 이미지를 따라서 올렺기(top), 투명도 조절(opacity)
* 5. 현재 이미지의 위치만 다시 아래로 내려주기
* 6. 현재변수, 다음변수 숫자를 바꿔주기. 만약 4를 넘었으면 초기화 해주기
*/
// 고정값
var $imgWrap;
var imgHeight; // 이미지 높이
var imgNum; // 이미지 개수
// 가변값
var currentIndex = 0; // 현재 박스에 들어와 있는 인덱스
var nextIndex; // 다음에 올 순번
$(document).ready(function(){
$imgWrap = $("#banner_container").children();
imgHeight = $imgWrap.outerHeight();
//alert(imgHeight);
imgNum = $imgWrap.size();
//alert(imgNum);
// 최초에 이미지들 전부 보여지는 밑에 전부 모아놓기
$imgWrap.css({"top":imgHeight, "opacity":0.2});
// 첫번째 이미지는 처음에 보이게해야함
$imgWrap.eq(0).css({"top":0,"opacity":1});
setInterval(onCount, 1000);
});
function onCount(){
// 다음이미지 번호를 현재이미지 번호 + 1로 해주기
nextIndex = currentIndex + 1;
// 이미지가 총 4장이므로 4가 넘어가면 다시 초기화
if(nextIndex==4){
nextIndex = 0;
}
onSlide();
// 다음에 보여져야할 현재이미지번호를 방금전에 설정한 다음이미지번호로 같게하기
currentIndex = nextIndex;
}
function onSlide(){
$imgWrap.eq(currentIndex).animate({"top":-imgHeight, "opacity":0.2}, 500, "easeOutExpo", function(){
// 위로 올라간 이미지를 다시 아래로 내려주기
$(this).css({"top":imgHeight});
});
$imgWrap.eq(nextIndex).animate({"top":0, "opacity":1}, 200, "easeOutExpo");
}
</script>
</head>
<body>
<div id="banner_container">
<div>
<img src="images/slide1.jpg">
</div>
<div>
<img src="images/slide2.jpg">
</div>
<div>
<img src="images/slide4.jpg">
</div>
<div>
<img src="images/slide5.jpg">
</div>
</div>
</body>
</html>
이미지 갤러리
작업개요
1. 레아웃구조와 각 id/cass 명 확인
2. 각섬네일 이미지에 보여질 큰이미지의 경로를 a 테그를 이용하여 링크설정 .
3. 각 a 테그를 클릭하면 a 테그의 경로를 얻어내어 메인이미지 앞에 넣어주고 기존에 이미지는
사라지게 한다.
주의) a테그를 클릭해서 스크립트를 실행시킨다음 a 테그자제의 링크가 동작안되도록 return false 설정
4. next 버튼을 클릭하면 pageWrap 의 현제 margin 값을 얻어내어 -300px (pageWrap 전체의 가로) 으로 animate 를 적용.
5. prev 버튼을 클릭하면 pageWrap 의 현제 margin 값을 얻어내어 +300px (pageWrap 전체의 가로) 으로 animate 를 적용.
tip!
a링크를 누르면 화면 이동을 금지하는 방법
return false;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>imgGallery</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
body{
background:black;
}
#container{
width:1000px;
margin:100px auto;
}
#navi{
width:300px;
float:left;
}
#navi ul{
height:460px;
}
#navi li{
list-style-type:none;
width:150px;
float:left;
}
#navi li img{
border:3px solid white;
}
#navi{
overflow:hidden;
}
#navi .pageWrap{
width:900px;
}
#navi .pageWrap .page{
width:300px;
float:left;
}
#navi p{
clear:both;
width:300px;
padding:10px 0;
text-align:center;
}
#navi p img{
cursor:pointer;
}
#main{
width:650px;
float:right;
}
#main img{
position:absolute;
border:3px solid white;
}
</style>
<script type="text/javascript">
/*
작업개요
1. 레아웃구조와 각 id/cass 명 확인
2. 각섬네일 이미지에 보여질 큰이미지의 경로를 a 테그를 이용하여 링크설정 .
3. 각 a 테그를 클릭하면 a 테그의 경로를 얻어내어 메인이미지 앞에 넣어주고 기존에 이미지는
사라지게 한다.
주의) a테그를 클릭해서 스크립트를 실행시킨다음 a 테그자제의 링크가 동작안되도록 return false 설정
4. next 버튼을 클릭하면 pageWrap 의 현제 margin 값을 얻어내어 -300px (pageWrap 전체의 가로) 으로 animate 를 적용.
5. prev 버튼을 클릭하면 pageWrap 의 현제 margin 값을 얻어내어 +300px (pageWrap 전체의 가로) 으로 animate 를 적용.
*/
var $sumImg; // thum이미지들
var $mainImg; // 큰 창에 보여지는 1개 대표 이미지
var $newImg; // 새로 바뀔 이미지
$(document).ready(function(){
// .page 아래의 a 태그를 잡아줌
$sumImg = $(".page a");
$mainImg = $("#main").children();
$sumImg.bind("click", onChange);
});
function onChange(){
$newImg = $(this).attr("href");
$mainImg.attr("src", $newImg);
return false; // a링크를 누르면 화면 이동을 금지하는 방법
}
</script>
</head>
<body>
<div id="container">
<div id="navi">
<div class="pageWrap">
<div class="page">
<ul>
<li><a href="images/photo1.jpg"><img src="images/photo1_thum.jpg" alt="" /></a></li>
<li><a href="images/photo2.jpg"><img src="images/photo2_thum.jpg" alt="" /></a></li>
<li><a href="images/photo3.jpg"><img src="images/photo3_thum.jpg" alt="" /></a></li>
<li><a href="images/photo4.jpg"><img src="images/photo4_thum.jpg" alt="" /></a></li>
<li><a href="images/photo5.jpg"><img src="images/photo5_thum.jpg" alt="" /></a></li>
<li><a href="images/photo6.jpg"><img src="images/photo6_thum.jpg" alt="" /></a></li>
<li><a href="images/photo7.jpg"><img src="images/photo7_thum.jpg" alt="" /></a></li>
<li><a href="images/photo8.jpg"><img src="images/photo8_thum.jpg" alt="" /></a></li>
</ul>
<p><img src="images/btn_next.jpg" alt="" class="next" /></p>
</div>
<div class="page">
<ul>
<li><a href="images/photo9.jpg"><img src="images/photo9_thum.jpg" alt="" /></a></li>
<li><a href="images/photo10.jpg"><img src="images/photo10_thum.jpg" alt="" /></a></li>
<li><a href="images/photo11.jpg"><img src="images/photo11_thum.jpg" alt="" /></a></li>
<li><a href="images/photo12.jpg"><img src="images/photo12_thum.jpg" alt="" /></a></li>
<li><a href="images/photo13.jpg"><img src="images/photo13_thum.jpg" alt="" /></a></li>
<li><a href="images/photo14.jpg"><img src="images/photo14_thum.jpg" alt="" /></a></li>
<li><a href="images/photo15.jpg"><img src="images/photo15_thum.jpg" alt="" /></a></li>
<li><a href="images/photo16.jpg"><img src="images/photo16_thum.jpg" alt="" /></a></li>
</ul>
<p><img src="images/btn_prev.jpg" alt="" class="prev" /> <img src="images/btn_next.jpg" alt="" class="next" /></p>
</div>
<div class="page">
<ul>
<li><a href="images/photo17.jpg"><img src="images/photo17_thum.jpg" alt="" /></a></li>
<li><a href="images/photo18.jpg"><img src="images/photo18_thum.jpg" alt="" /></a></li>
<li><a href="images/photo19.jpg"><img src="images/photo19_thum.jpg" alt="" /></a></li>
</ul>
<p><img src="images/btn_prev.jpg" alt="앞으로" class="prev" /></p>
</div>
</div>
</div>
<div id="main">
<img src="images/photo1.jpg" alt="" />
</div>
</div>
</body>
</html>