5일차
오늘은 아주 중요한 animate이 나온다 본격적으로 정리하기전에 몇가지 효과들을 정리한 후에 하고자한다.
slide
slideUp, slideDown, slideToggle
slideUp: 선택한 요소가 서서히 올라가면서 사라지는 효과를 준다
형식) $('선택자').slideUp() or slideUp(유지시간,호출할 함수명)
아이디가 slideup 이라는 버튼을 클릭했을때 div박스에 slideUp 효과를 부여
<script>
$('#slideup').click(function(){
$('div').slideUp();
})
</script>
slideDown: 선택한 요소가 서서히 내려오면서 나타나는 효과를 준다
형식) $('선택자').slideDown() or slideDown(유지시간(초,문자열(slow,fast)),호출할 함수명)
아이디가 slidedown 이라는 버튼을 클릭했을때 div박스에 slideDown 효과를 부여
유지시간은 slow
<script>
$('#slidedown').click(function(){
$('div').slideDown("slow");
})
</script>
slideToggle: 선택한 요소가 현재 사라진 상태라면 .slideDown()를 수행하고, 나타나 있는 상태라면 .slideUp()를 수행한다.
**형식) $('선택자').slideToggle() or slideToggle(유지시간(초,문자열(slow,fast)),호출할 함수명))
아이디가 slidetoggle 이라는 버튼을 클릭하면
div박스에 slideUp과 slideDown 효과를 번갈아가면서 준다.
유지시간은 slow
<script>
$('#slideToggle').click(function(){
$('div').slideToggle("slow");
})
</script>
fade
fadeIn, fadeOut, fadeToggle
fadeIn: 선택한 요소를 서서히 화면에 보이게 한다
형식) $('선택자').fadeIn(유지시간=>함수를 호출)
아이디가 fadeIn이라는 버튼을 클릭했을때 div태그를 3초동안 서서히 보여주게 한다면?
<script>
$('#fadeIn').click(function(){
$('div').fadeIn(3000,function(){//div태그를 3초동안 서서히 보여준 뒤
$('span').fadeIn(100);//0.1초 //div안에있는 글자는 span에 있기때문에
});
})
</script>
fadeOut: 선택한 요소를 서서히 화면에 사라지게 한다(투명도높아짐)
형식) $('선택자').fadeOut(유지시간(초,문자열(slow,fast)),호출할 함수명))
아이디가 fadeOut이라는 버튼을 클릭했을때 div태그를 3초동안 서서히 사라지게 한다면?
<script>
$('#fadeOut').click(function(){
$('div').fadeOut(3000,function(){//div태그를 3초동안 서서히 사라짐
$('span').fadeIn(100);//div태그가 서서히 사라질때까지는 보여야하기때문에
});
})
</script>
fadeToggle: fadeIn,fadeOut이 번갈아 가면서 화면에 출력
형식) $('선택자').fadeToggle(유지시간(초,문자열(slow,fast)),호출할 함수명))
아이디가 fadeToggle 이라는 버튼을 클릭하면
div박스에 fadeUp과 fadeDown 효과를 번갈아가면서 준다.
<script>
$('#fadeToggle').click(function(){
$('div').fadeToggle(3000,function(){
$('span').fadeIn(100);
});
})
</script>
animate()
스타일을 적용한 요소를 에니메이션 효과를 줘서 움직일 수 있다
형식 $('효과대상자').animate(1.스타일적용,2.유지시간,가속도(늦게,빠르게),3.콜백함수)
스타일 : 필수이며, 이펙트 효과를 구성할 CSS 스타일 속성을 정의한다.
지속 시간 : 이펙트 효과가 지속될 시간을 전달한다.
시간당 속도 함수(easing function): 이펙트 효과의 시간당 속도를 전달한다.
콜백 함수: 이펙트 효과의 동작이 완료된 후에 실행할 함수를 정의한다.
클래스명이 btn1이라는 버튼을 누르면 클래스명이 txt1 라는 문장이(span태그) 오른쪽으로 500px 아동하면서 글자 크기가 30px로 변하는 효과를 2초동안 주고싶다면?
<script>
$('.btn1').on('click',function(){
$('.txt1').animate({
marginLeft:"500px",
fontSize:"30px"
},2000,"linear",function(){
alert("모션완료!")
})//animate()
})//on
</script>
-----------------------------------------
클래스명이 btn2이라는 버튼을 누르면 클래스명이 txt2 라는 문장이(span태그) 오른쪽으로 50px 아동하면서 글자 크기가 10px로 변하는 효과를 1초동안 주고싶다면?
<script>
$('.btn2').on('click',function(){
$('.txt2').animate({
marginLeft:"50px",
fontSize:"10px"
},1000,"linear",function(){
alert("모션완료2!")
})//animate()
})
</script>
TabMenu 예제
TabMenu 예제로 많이 읽어보기
body안의 본문 내용은 너무길어서 짧게 생략함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>03.TabMenu.html</title>
<style>
*{ /* 모든 태그는 죄측상단을 기준으로 0,0을 기준으로 배치*/
margin:0; /*바깥여백*/
padding:0; /*안쪽여백*/
}
#container {
width:500px; /* 임의의 숫자,탭의수,탭의 넓이를 고려 작성 */
margin:50px auto; /* 상단,하단은 50px, 좌우여백은 자동으로 설정*/
}
ul.tab li {/*탭의 제목에 대한 스타일 적용*/
list-style-type:none; /*마커 제거*/
width:100px;
height:40px;
float:left; /*왼쪽을 기준으로 정렬*/
}
ul.tab li a{ /*탭의 글자색,정렬,탭에 이미지 불러오기*/
background:url("./img/tab.jpg");
display:block; /* ? */
color:blue; /* 탭제목의 글자*/
line-height:40px; /*행간*/
text-align:center;
}
ul.tab li a.selected {/*맨 처음의 자바스크립트탭을 설정*/
background:url("./img/tab_selected.jpg");
text-decoration:none;/*텍스트 밑줄 제거(참고로 underline,overline,line-through 등이 있다)*/
color:#333;
cursor:default; /* 마우스 커서가 손가락이 아닌 default 화살표로*/
}
ul.panel {
clear:both; /*위의 배치방법 초기화*/
border:1px solid #9FB7D4;
border-top:none; /*탭의 제목과 본문사이의 부분은 테두리선 해제*/
padding:0 /*안쪽여백은 0 */
}
ul.panel li {
list-style-type:none;
padding:10px; /* 테두리 안쪽 여백 */
text-indent:1em; /* 맨처음 나오는 행의 들여쓰기 설정(현재 폰트크기만큼)*/
color:#333;
}
</style>
<script>
$(function(){
//첫번째탭을 제외한 나머지탭의 내용은 안보이게 설정-> :not #tab1
$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide();
$("ul.tab li a").click(function(){
$("ul.tab li a").removeClass("selected");//현재 선택된탭 스타일해제
$(this).addClass("selected"); //현재 방금 선택된 탭을 스타일적용
$("ul.panel li").hide();//전의 내용을 전부 감추기
$($(this).attr("href")).show();//현재 선택된 tab의 내용만 보이기
})
})
</script>
</head>
<body>
<div id="container">
<ul class="tab"><!-- 탭제목만 따로 설정,링크걸때 #키워드를 찾아갈 수 있도록 설계 -->
<!-- 키워드는 내가 정하면됨 -->
<li><a href="#tab1" class="selected">JavaScript</a></li>
<li><a href="#tab2">CSS</a></li>
<li><a href="#tab3">HTML</a></li>
<li><a href="#tab4">JQuery</a></li>
<li><a href="#tab5">XHTML</a></li>
</ul>
<ul class="panel"><!-- 선택된 탭에 따라서 내용이 나오는 방법 -->
<li id="tab1"><!-- JavaScript -->
자바스크립트는 다양한 장점과 단점을 가진다. 먼저 장점부터 살펴보자. 자바스크립트는 컴파일 과정이 없기 때문에 다른
언어와 비교했을 때 빠른 시간 안에 스크립트 코드를 작성할 수 있게 도와준다.
</li>
<li id="tab2"><!-- CSS -->
기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고
스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다.
</li>
<li id="tab3"><!-- HTML -->
인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류이다. 특히 하이퍼텍스트를 작성하기
위해 개발되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다.
</li>
<li id="tab4"><!-- JQuery -->
jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 존 레식이 2006년 뉴욕
시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.
jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서v2의 듀얼 라이선스를 가진 자유 오픈 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체
모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을
제공한다.
</li>
<li id="tab5"><!-- XHTML -->
XHTML은 HTML의 후속으로 많은 사람들이 XHTML을 HTML의 "최신 버전"으로 보고 있다. 하지만 HTML과 XHTML은 별개의 분리된 표준이다.
</li>
</ul>
</div>
</body>
</html>
largeimage 예제
예제는 특히 많이 풀어보자
각각 사진들을 마우스를 갖다대면 밑에 큰 사진에 fadeTo효과를 적용해서 나타낸다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>04.largeimage.html</title>
<style>
.small img {border:none;margin:10px;width:60px;height:60px;}
</style>
<script>
$(function(){
//$('.small a').mouseover(function(){})
$('.small a').hover(function(){//위에처럼 해도되지만 hover로 해도됨
var imgname=$(this).attr('href');// 중복되면 this
//alert(imgname);
//fadeIn,fadeOut->fadeTo(유지시간,투명도(0 or 1),효과후 처리할 함수)
//서서히(slow) 안보이게 설정하고나서 0은 안보이게
$('.large').fadeTo("slow",0,function(){
$('.large').attr('src',imgname)
}).fadeTo("slow",1); //서서히 눈에 보이게 설정(투명도1)
//새로운 이미지로 전환
},function(){})
})
</script>
</head>
<body>
<div class="small">
<a href="./img/photo1.jpg"><img src="./img/photo1.jpg"></a>
<a href="./img/photo2.jpg"><img src="./img/photo2.jpg"></a>
<a href="./img/photo3.jpg"><img src="./img/photo3.jpg"></a>
<a href="./img/photo4.jpg"><img src="./img/photo4.jpg"></a>
<a href="./img/photo5.jpg"><img src="./img/photo5.jpg"></a>
<a href="./img/photo6.jpg"><img src="./img/photo6.jpg"></a>
</div>
<img src="./img/photo1.jpg" class="large">
</body>
</html>
2022-08-03
