小例子:实现字体的放大和缩小
其中:jquery-1[1].3.2.min.js 这要自己下载的js
代码如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" src="jquery-1[1].3.2.min.js">
</script>
<script language="javascript">
$(document).ready(function(){
$('div.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 == 'large'){
num *=1.4;
}
else if(this.id == 'small'){
num /=1.4;
}
$speech.css('fontSize',num+unit);
});
});
</script>
</head>
<body>
<div id="switcher">
<div class="label">Style switcher</div>
<div class="button" id="large" style="border:1px solid red ; font-size:24px; color:#CC0000; background-color:#000000;"> Change large(click me)</div>
<div class="button" id="small" style="border:2px outset blue; font-size:24px;color:#0000FF; background-color:#000000"> Change small(click me)</div>
</div>
<div class="speech">
<p>ssssssssssss</p>
</div>
</div>
</body>
</html>