반응형
<!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></title>
<link href="Css/cssJMBae.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.DivCss
{
position: relative; /*해당 요소가 relative or absolute 로 설정(기본값:static)되어야 animate가 동작 */
background-color: #FFFFCC; border: thin dotted #000000; padding: 2px; margin: 0px; width: 200px;
}
</style>
<script src="Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('p:eq(1)').hide();
$('span.more').click(function () {
//효과 속도
//slow: 0.6초 안에, normal: 0.4초 안에, fast: 0.2초안에 효과가 완성.
//또는 미리초로 지정 할 수 있음. ex) show(700)
//$('p:eq(1)').show(1000);
//페이드인, 페이드아웃
//속도는 효과속도와 같음
//$('p:eq(1)').fadeIn(1000);
//애니메이션
$('p:eq(1)')
.animate({ left: 650 }, 'slow') //왼쪽에서 650 띄우기
.animate({ height: 200 }, 'slow') //높이 200으로 키우기
.fadeTo('1000', 0.5) //fade 1초안에 50%로 변환
.slideUp('slow') //slow 속도로 위로 접기
.slideDown('slow') //slow 속도로 펼치기
.fadeTo('slow', 1.0, function () { ////fade 1초안에 100%로 변환 후 backgroundColor 변환
$(this).css('backgroundColor', '#EBFABE');
});
$(this).hide();
});
});
$(document).ready(function () {
$('input.button').click(function () {
var $speech = $('div.speech');
var currentSize = $speech.css('fontSize');
var num = parseFloat(currentSize, 10);
var unit = currentSize.slice(-2);
if (this.id == 'btn1') {
num *= 1.4;
} else if (this.id == 'btn2') {
num /= 1.4;
}
$speech.css('fontSize', num + unit);
});
});
</script>
</head>
<body>
<input id="btn1" type="button" class="button" value="글자키우기" />
<input id="btn2" type="button" class="button" value="글자줄이기" />
<div class="speech">
<p>Visual C#은 Microsoft에서 구현한 C# 언어입니다. Visual Studio에서는 모든 기능을 갖춘 코드 편집기, 컴파일러, 프로젝트 템플릿, 디자이너
<span class="more">...</span></p>
<p class="DivCss"> C#("시 샵"으로 발음)은 .NET Framework에서 실행되는 다양한 응용 프로그램을 만들기 위해 디자인된 프로그래밍 언어입니다. C#은 간결하고, 강력하며, 형식이 안전한 개체 지향적인 언어입니다. C#은 여러 가지 혁신적인 기술을 통해 C 스타일 언어의 표현성과 우아함을 그대로 유지하면서 신속한 응용 프로그램 개발을 지원합니다. </p>
</div>
</body>
</html>
보여지는 이미지는 생략.. 실행해보면 잘 나옴.
반응형
'Dev > jQuery' 카테고리의 다른 글
| [jQuery] jQuery 요소 복사/추가하기(clone, prepend, append, insert) (0) | 2009.12.02 |
|---|---|
| [jQuery] jQuery 속성 조작하기 (0) | 2009.12.01 |
| [jQuery] jQuery toggle사용(접기/펴기) (0) | 2009.11.30 |
| [jQuery] jQuery 선택자 정리 (3) | 2009.11.24 |
| [jQuery] $(document).ready()의 간결한 단축코드 (0) | 2009.11.24 |