当前位置:编程学习 > JS >>

再发一个实现字体大中小方法的JavaScript代码

再发一个实现字体大中小方法的JavaScript代码,这种效果估计大家在网上见到挺多了,点击适时改变网页上字体的大小,以适合不同人群的浏览体验,本代码较简单,使用方便。
答案:<!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>
<style type="text/css">
<!--
body {font-size:14px}
-->
</style>
<SCRIPT type=text/javascript>
function $(xixi) {
return document.getElementById(xixi);
}
//转换字号
function doZoom(size){
	if(size==12){
		$("contentText").style.fontSize = size + "px";
		$("fs12").style.display = "";
		$("fs14").style.display = "none";
		$("fs16").style.display = "none";
	}
	if(size==14){
		$("contentText").style.fontSize = size + "px";
		$("fs12").style.display = "none";
		$("fs14").style.display = "";
		$("fs16").style.display = "none";
	}
	if(size==16){
		$("contentText").style.fontSize = size + "px";
		$("fs12").style.display = "none";
		$("fs14").style.display = "none";
		$("fs16").style.display = "";
	}
}
</SCRIPT>
</head>
<body>
<DIV class=fontSize id=fs12 style="DISPLAY: none"><A 
href="javascript:doZoom(16)">大</A> <A 
href="javascript:doZoom(14)">中</A> <SPAN>小</SPAN></DIV>
<DIV class=fontSize id=fs14><A 
href="javascript:doZoom(16)">大</A> <SPAN>中</SPAN> <A 
href="javascript:doZoom(12)">小</A></DIV>
<DIV class=fontSize id=fs16 style="DISPLAY: none"><SPAN>大</SPAN> <A 
href="javascript:doZoom(14)">中</A> <A 
href="javascript:doZoom(12)">小</A></DIV>
<br /><br />
<DIV id=contentText>我是你的玫瑰花</DIV>
</body>
</html>

上一个:仿zol商城播报,仿新浪微博
下一个:带阴影效果的链接提示

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,