jQuery 改变页面字体的大小

jQuery 改变页面字体的大小

参考资料:
《锋利的jQuery》    作者: 单东林 张晓菲 魏然    出版社: 人民邮电出版社

页面初始化后效果如图:
页面初始化

点击"放大"时,放大字体,点击"缩小"时,缩小字体。代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				$("span").click(function() {
					var cssFontSize = $("#para").css("font-size");	//获取字体大小
					var fontSize = parseFloat(cssFontSize);	//获取字体大小的值
					var unit = cssFontSize.slice(-2);	//获取字体大小的单位
					var className = $(this).attr("class");
					if ("zoomIn" == className) {	//放大字体
						if (fontSize <= 22) {
							fontSize += 2;
						}
					} else if ("zoomOut" == className) {	//缩小字体
						if (fontSize >= 12) {
							fontSize -= 2;
						}
					}
					$("#para").css("font-size", fontSize + unit);	
				});
			});
		</script>  	
		
		<!-- CSS -->
		<style type="text/css">
			.zoomIn, .zoomOut {
				background: fuchsia;
				cursor: pointer;
			}
		</style>
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<div class="msg">
  			<div class="msg_caption">
  				<span class="zoomIn">放大</span>
  				<span class="zoomOut">缩小</span>
  			</div>
  			<div>
  				<p id="para">
  					(该内容来自维基百科)超价分子是指由一种或多种主族元素形成,<br />
  					而且中心原子价层电子数超过8的一类分子。<br />
  					例如五氯化磷、六氟化硫、磷酸根离子、三氟化氯以及三碘阴离子都是典型的超价分子。<br />
  					超价分子的概念最早是由上述几种不符合八隅体规则的分子产生的,<br />
  					而自从超价分子的概念提出以来,就处于不断的争议之中。<br />
  					八隅体规则的例外主要有三种,缺电子分子、奇电子分子和超价分子。<br />
  					利用分子轨道理论可以很好地解释前两种分子,然而对于超价分子,<br />
  					不但结构没有得到公认的解释,甚至定义都处于争论之中。<br />
  					超价分子的概念最早由杰里米·穆舍尔在1969年正式提出,<br />
  					他定义以VA族到0族元素为中心原子,而且中心原子氧化态比最低氧化态低的分子为超价分子。<br />
  					超价分子的N-X-L命名法在1960年提出,经常用于区分超价分子中心原子所在主族。<br />
  					关于超价分子本质和分类方法的争论可追溯到20世纪20年代,<br />
  					即路易斯和兰米尔时期关于化学键本质的争论。
  				</p>
  			</div>
  		</div>
  	</body>
</html>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值