jQuery_tips
글자 사이즈(Font Size) 늘리고 줄이는 예제
MorningPhys
2015. 7. 14. 17:51
소스보기
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>글자 폰트 사이즈 늘리고 줄이기, 숨기고 보이기, 버튼 크기 조절하는 예제</title>
<style>
.label {
font-weight: bold;
font-size: 12pt;
margin: 20px 0;
}
.button {
width: 200px;
border: 1px solid #CCCCCC;
background-color: #EEEEEE;
padding: 2px;
margin: 10px 0;
}
.more {
color: blue;
font-size: 25px;
font-weight: bold;
text-decoration: underline;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
$("p:eq(1)").hide();
$("span.more").click(function() {
$("p:eq(1)").animate({height:"show", width:"show", opacity:"show"}, "slow");
$(this).hide();
});
$("div.button").click(function() {
var $speech = $("div.speech");
var currentSize = $speech.css("fontSize"); /* 폰트사이즈를 알아낸다. */
/* parseFloat()은 숫자가 아니면 숫자가 아니라는 뜻의 NaN을 반환한다. */
var num = parseFloat(currentSize, 10);
/* 끝에서부터 두자리의 문자를 가져온다. */
var unit = currentSize.slice(-2);
if(this.id == "switcher-large"){
num *= 1.4; /* num = num * 1.4 와 동일하다. */
} else if(this.id == "switcher-small") {
num /= 1.4; /* num = num / 1.4 와 동일하다. */
}
$speech.css("fontSize", num + unit);
});
$("div.label").click(function() {
$("div.button")
.fadeTo("slow", 0.5)
.animate({width:400}, "slow")
.fadeTo("slow", 1.0)
.animate({height:38}, "slow");
});
});
</script>
</head>
<body> |
설명
|
.label {
font-weight: bold; /* 글자를 진하게 */
font-size: 12pt;
margin: 20px 0; /* 바깥 위아래 여백을 20px 준다. */
}
.button {
width: 200px;
/* 테두리를 1px크기의 실선으로 #CCCCCC 색깔로 입힌다. */
border: 1px solid #CCCCCC;
background-color: #EEEEEE; /* 배경색 */
padding: 2px;
margin: 10px 0;
} |
스타일시트에 label과 button 클래스를 정의합니다.
